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

瀏覽器相容性