为什么`slot.assignedNodes({flatten: true})`没有检测到槽中的默认`<div>`？

Question

我刚刚花了很多分钟尝试调试这个问题。我没有找到记录这种行为的来源——如果它们确实存在的话，也许我错过了它们——我决定在这里写下这个，以防其他人面临同样的问题。

我构建的 Web 组件有一个

<slot>

元素，其中有一个默认的

<div>

：

<slot name="timer">
    <div class="rp__timer"></div>
</slot>

当我尝试使用

<div>

更新

innerHTML

时，什么也没发生。就好像

<div>

不存在一样。以下是我尝试访问

<div>

的方法：

this.timerSlot = this.shadowRoot.querySelector('slot[name=timer]');
let div = this.timerSlot.assignedNodes({flatten: true})[0];
div.innerHTML = "SOME TEXTE";

但是什么也没发生。这段代码有什么问题？

Answer 1

DOM 节点与 DOM 元素不

相同

<p>Hello<a href="...">Web Components</a>World</p>

元素p和a是所有节点的子集

因此 signedNodes 为您提供所有 5 个节点（图像中的

href

是一个 属性）

和 signedElements 为您提供您想要的 2 个元素

MDN 文档：

对于文档始终使用MDN（尽管MDN也不是100%正确）

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements

Answer 2

所以上面的代码有问题。

由于某种原因，我创建的

<div>

在

assignNodes()

返回的数组中没有分配索引0。事实上，这是第一起案件。当

console.log()

编辑

this.timerSlot.assignedNodes({flatten: true})

的返回值时，它在 Chrome 和 Firefox 中都是这样的

Array(3) [ #text, div.rp__timer, #text ]

。

事实证明，我为了提高 HTML 文件中

<div>

的可读性而添加的新行并没有像我相信的那样被忽略。

将我的代码更新为单行配置后，即

<slot name="timer"><div class="rp__timer"></div></slot>

，问题消失了，代码执行了预期的操作。

现在，我不知道这是一个功能还是一个错误。但由于它同时存在于 Chrome 和 Firefox 中，我认为可能是前者。不管怎样，我在可用的文档中找不到任何提及它的信息。

我希望你会发现这很有用。