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"]')也返回一个空节点列表。

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

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

Answer 1

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

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

这样做的区别在于，this.querySelectorAll('[slot="content"]')您获得的是实际位于槽中的元素，而不是具有该slot属性的元素。不是自定义元素的直接子元素且具有该属性的元素不会出现在 中<slot>，但可以通过 找到它们this.querySelectorAll('[slot="content"]')。