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

View in English Always switch to English

Element:assignedSlot 属性

基线 广泛可用

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

Element 接口的 assignedSlot 只读属性返回一个 HTMLSlotElement,表示该节点插入其中的 <slot> 元素。

一个 HTMLSlotElement 实例;若元素未分配给插槽,或者关联的影子根以 modeclosed 的方式附加(详情参见 Element.attachShadow),则为 null

示例

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

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

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

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

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

规范

规范
DOM
# dom-slotable-assignedslot

浏览器兼容性