HTMLSlotElement

还继承了其父接口的属性，HTMLElement.

HTMLSlotElement.name

用于获取和设置插槽名称的字符串。

还继承了其父接口的方法，HTMLElement.

HTMLSlotElement.assign()

将此插槽的手动分配的节点设置为给定的节点。

HTMLSlotElement.assignedNodes()

返回分配给此插槽的节点的序列。如果 flatten 选项设置为 true，则它返回分配给此插槽的节点以及分配给此插槽的任何后代插槽的节点的序列。如果没有找到分配的节点，则它将返回插槽的回退内容。

HTMLSlotElement.assignedElements()

返回分配给此插槽的元素的序列（以及其他节点）。如果 flatten 选项设置为 true，则它返回分配给此插槽的元素以及分配给此插槽的任何后代插槽的元素的序列。如果没有找到分配的元素，则它将返回插槽的回退内容。

还继承了其父接口的事件，HTMLElement.

使用 addEventListener() 或通过将事件侦听器分配给此接口的 oneventname 属性来侦听这些事件。

插槽更改

当 HTMLSlotElement 实例 (<slot> 元素) 中包含的节点发生更改时，将在该实例上触发。

以下代码段取自我们的 slotchange 示例 (也请查看在线演示).

let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

这里我们获取所有插槽的引用，然后在模板中的第二个插槽添加一个 slotchange 事件侦听器 - 也就是在示例中其内容不断发生变化的插槽。

每次插入插槽中的元素发生更改时，我们都会在控制台中记录一条报告，说明哪个插槽发生了更改，以及插槽中的新节点是什么。