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①

瀏覽器相容性