此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

HTMLSlotElement.name

基线 广泛可用

自 2020年1月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

元素HTMLSlotElementname属性,可以获取和设置属性值。插槽提供了 web 组件的摆放位置,辅助用户布局。

语法

var name = htmlSlotElement.name
htmlSlotElement.name = name

一个 DOMString.

例子

下面的片段来自 slotchange example (see it live also).

js
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 +
      '".',
  );
});

这里我们获取所有插槽的引用,然后给模板里的第二个插槽增加事件— 跟踪内容变化。

每当附加在插槽中的内容变化,我们都记录插槽相关的内容。

规范

规范
HTML
# dom-slot-name-dev

浏览器兼容性