HTMLSlotElement：name 属性

基线广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中均可用： 2020 年 1 月.

的name 属性HTMLSlotElement接口返回或设置插槽名称。插槽是 Web 组件中的占位符，用户可以使用自己的标记填充它。

值

字符串。

示例

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 事件监听器——在示例中，此插槽的内容一直在更改。

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

规范

规范
HTML 标准 # dom-slot-name-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。