Web 组件：如何查询插槽的子项

Question

假设我有一个本机 Web 组件，它有一个插槽：

    <slot id="CONTENT_SLOT" name="content"></slot>

const CONTENT_SLOT = this.shadowRoot.getElementById("CONTENT_SLOT") 找到元素，但 CONTENT_SLOT.children 为空。

this.shadowRoot.querySelectorAll('[slot="content"]') returns 也是一个空节点列表。

document.querySelectorAll('[slot="content"]') 在插槽中查找项目，但对于所有 Web 组件。

如何只获取当前 Web 组件实例的 content 槽中元素的 NodeList？

Answer 1

想通了：

this.querySelectorAll('[slot="content"]')

Answer 2

您可以使用 assignedElements() 获取分配给插槽的元素。

this.shadowRoot.querySelector('#CONTENT_SLOT').assignedElements();

这样做与 this.querySelectorAll('[slot="content"]') 的区别在于，您获得的是实际位于插槽中的元素，而不是具有 slot 属性的元素。不是 custom-element 的直接子元素但具有属性的元素将不会出现在 <slot> 中，但它们会在 this.querySelectorAll('[slot="content"]').

中找到

Web 组件：如何查询插槽的子项

Web component: How to query children of a slot

web-component