Element: assignedSlot 属性

Baseline 已广泛支持

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

assignedSlotElement 接口的一个只读属性,它返回一个 HTMLSlotElement 对象,该对象代表节点被插入到的 <slot> 元素。

返回一个 HTMLSlotElement 实例,如果该元素未被分配到任何 slot,或者关联的 shadow root 是以 closed 模式附加的(有关更多详细信息,请参阅 Element.attachShadow),则返回 null

示例

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

<my-paragraph> 在文档中使用时,通过将一个具有 my-text 值的 slot 属性的元素包含在其中,该 slot 会被可 slot 元素填充。以下是一个示例:

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

在我们的 JavaScript 文件中,我们获取上面显示的 <span> 的引用,然后记录该 <span> 被插入到的原始 <slot> 元素的引用。

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

规范

规范
DOM
# dom-slotable-assignedslot

浏览器兼容性