HTMLSlotElement - 访问 <slot> 元素

HTMLSlotElement 接口是 Shadow DOM API的一部分，允许访问 HTML <slot> 元素的名称和分配的节点。

属性

HTMLSlotElement.name

DOMString：可用于获取和设置插槽的名称

方法

HTMLSlotElement.assignedNodes()

返回分配给该插槽的元素序列，或者插槽的回退内容。

实例

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

在这里，我们获取所有插槽的引用，然后为第二个插槽添加一个 slotchange 事件监听器。

每次插入插槽中的元素发生变化时，我们都会向控制台发送报告，说明哪个插槽已更改，以及插槽中的新节点是什么。

规范

规范	状态	备注
HTML Living Standard HTMLSlotElement 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

1. 考虑中