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(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

在这里，我们获取所有插槽的引用，然后为模板中的第二个插槽添加一个 slotchange 事件监听器——在示例中，这个插槽的内容会不断变化。

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

规范

浏览器兼容性