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

View in English Always switch to English

Element:slot 属性

基线
广泛可用

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

Element 接口的 slot 属性返回该元素所插入的影子 DOM 插槽的名称。它反映元素的 slot 内容属性。

插槽是 Web 组件内部的占位符,你可以用自己的标记填充它(更多信息见使用模板和插槽)。

值

一个字符串。

示例

在我们的简单模板示例(查看在线示例)中,我们创建了一个名为 <my-paragraph> 的简单自定义元素示例:为其附加影子根,再用包含名为 my-text 的插槽的模板内容填充它。

在文档中使用 <my-paragraph> 时,通过在该元素内加入一个 slot 属性值为 my-text 的可插槽元素来填充该插槽。示例如下:

html
<my-paragraph>
  <span slot="my-text">使用不同的文本!</span>
</my-paragraph>

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

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

规范

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

浏览器兼容性