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

Question

我刚刚花了很多时间来调试这个问题。我没有找到记录这种行为的来源——如果它们确实存在，我可能会错过它们——我决定把它写在这里，以防其他人遇到同样的问题。

我构建的一个 Web 组件有一个 <slot> 元素，里面有一个默认的 <div>：

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

当我尝试使用 innerHTML 更新 <div> 时，没有任何反应。就好像 <div> 不存在一样。这是我尝试访问 <div>:

的方式

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

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

Answer 1

所以上面的代码有什么问题。

出于某种原因，我创建的 <div> 未在由 assignNodes() 编辑的数组 return 中分配索引 0。这实际上是第一个案例。当 console.log() 编辑 this.timerSlot.assignedNodes({flatten: true}) 的 return 值时，它在 Chrome 和 Firefox 中都是这样的 Array(3) [ #text, div.rp__timer, #text ]。

事实证明，我在 HTML 文件中围绕 <div> 添加的新行没有像我相信的那样被忽略。

将我的代码更新为单行配置后，即 <slot name="timer"><div class="rp__timer"></div></slot>，问题消失了，代码完成了预期的工作。

现在，我不知道这是功能还是错误。但由于它同时出现在 Chrome 和 Firefox 中，我认为它可能是前者。无论哪种方式，我都无法在可用文档中找到任何提及。

我希望你会觉得这很有用。

Answer 2

DOM 节点不与DOM 元素[=44]相同=]

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

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

所以 assignedNodes 给你所有 5 个节点（图像中的href 是一个属性)

和 assignedElements 为您提供 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

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

Why is `slot.assignedNodes({flatten: true})` not detecting the default `<div>` in the slot?

javascript

html

web-component

custom-element

MDN 文档：