时间戳

首页 > 解决方案 > 为什么`slot.assignedNodes({flatten: true})`没有检测到默认`

` 在插槽中？

javascript - 为什么`slot.assignedNodes({flatten: true})`没有检测到默认`
` 在插槽中？

问题描述

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

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

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

标签： javascripthtmlweb-componentcustom-element

解决方案

DOM节点与DOM元素不同

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

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

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

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

MDN 文档：

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

推荐阅读