HTMLSlotElement
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
影子 DOM API 的 HTMLSlotElement 接口用于访问 HTML <slot> 元素的名称和分配的节点。
实例属性
还继承了其父接口 HTMLElement 的属性。
HTMLSlotElement.name-
用于获取和设置插槽的名称的字符串。
实例方法
还继承了其父接口 HTMLElement 的方法。
HTMLSlotElement.assign()-
将此插槽的手动分配节点设置为给定的节点。
HTMLSlotElement.assignedNodes()-
返回分配给该插槽的节点序列。如果
flatten选项设置为true，则返回分配给该插槽的节点序列，以及分配给该插槽的任何后代插槽的节点序列。如果未找到已分配的节点，则返回插槽的回退内容。 HTMLSlotElement.assignedElements()-
返回分配给该插槽的元素序列（且不包括其他节点）。如果
flatten选项设置为true，则返回分配给该插槽的元素序列，以及分配给该插槽所有后代插槽的元素序列。如果未找到分配的元素，则返回插槽的回退内容。
事件
还继承了其父接口 HTMLElement 的事件。
使用 addEventListener() 或通过将事件监听器赋值给该接口的 oneventname 属性来监听这些事件。
slotchange-
当插槽中包含的节点发生变化时，在
HTMLSlotElement实例（<slot>元素）上触发此事件。
示例
以下代码片段来自我们的 slotchange 示例（也可以在线查看）。
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
let nodes = slots[1].assignedNodes();
console.log(
`插槽“${slots[1].name}”中的元素已更改为“${nodes[0].outerHTML}”。`,
);
});
在这里，我们获取所有插槽的引用，然后为模板中的第二个插槽添加一个 slotchange 事件监听器——这个插槽在示例中不断更改其内容。
每次插入到插槽中的元素发生变化时，我们会在控制台记录一条报告，指出哪个插槽发生了变化，以及插槽内的新节点是什么。
规范
| Specification |
|---|
| HTML # htmlslotelement |