HTMLSlotElement

还继承了其父接口 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 事件监听器——这个插槽在示例中不断更改其内容。

每次插入到插槽中的元素发生变化时，我们会在控制台记录一条报告，指出哪个插槽发生了变化，以及插槽内的新节点是什么。