HTMLSlotElement: name 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

HTMLSlotElement 接口的 name 属性返回或设置插槽名称。插槽是 Web 组件内部的一个占位符,用户可以用自己的标记来填充它。

字符串。

示例

以下代码片段取自我们的 slotchange 示例查看实时示例)。

js
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

浏览器兼容性