Element: slot 属性

Baseline 已广泛支持

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

Element 接口的 slot 属性返回该元素被插入到的 shadow DOM slot 的名称。

Slot 是 Web Component 中的一个占位符,用户可以使用自己的标记来填充它(更多信息请参阅 使用模板和插槽)。

字符串。

示例

在我们 simple-template 示例实时查看)中,我们创建了一个名为 <my-paragraph> 的简单自定义元素示例,该示例附加了一个 shadow root,然后使用包含名为 my-text 的 slot 的模板内容进行填充。

<my-paragraph> 在文档中使用时,该 slot 会被一个具有 my-text 值的 slot 属性的元素所填充。下面是一个此类示例:

html
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

在我们的 JavaScript 文件中,我们获取了上面显示的 <span> 的引用,然后记录了相应 <slot> 元素名称的引用。

js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'

规范

规范
DOM
# ref-for-dom-element-slot①

浏览器兼容性