0

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

我构建的 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";

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

4

2 回答 2

1

DOM节点与DOM元素不同

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

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

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

并且assignedElements为您提供了您所追求的2 个元素

MDN 文档：

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

于 2021-05-13T12:30:05.133 回答
0

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

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

事实证明，我为提高<div>HTML 文件中的可读性而添加的新行并没有像我相信的那样被忽略。

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

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

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

于 2021-05-12T23:20:17.143 回答