HTMLSlotElement

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

HTMLSlotElement 介面是 Shadow DOM API 的一部分,可用於訪問 HTML <slot> 元素的名稱和已分配的節點。

EventTarget Node Element HTMLElement HTMLSlotElement

例項屬性

它還繼承了其父介面 HTMLElement 的屬性。

HTMLSlotElement.name

用於獲取和設定插槽名稱的字串。

例項方法

它還繼承了其父介面 HTMLElement 的方法。

HTMLSlotElement.assign()

將此插槽的手動分配節點設定為給定的節點。

HTMLSlotElement.assignedNodes()

返回分配給此插槽的節點序列。如果 flatten 選項設定為 true,則返回分配給此插槽的節點以及分配給此插槽的任何後代插槽的節點序列。如果沒有找到分配的節點,則返回插槽的回退內容。

HTMLSlotElement.assignedElements()

返回分配給此插槽的元素序列(不包括其他節點)。如果 flatten 選項設定為 true,則返回分配給此插槽的元素以及分配給此插槽的任何後代插槽的元素序列。如果沒有找到分配的元素,則返回插槽的回退內容。

事件

它還繼承了其父介面 HTMLElement 的事件。

使用 addEventListener() 監聽這些事件,或透過將事件監聽器分配給此介面的 oneventname 屬性。

slotchange

當插槽中包含的節點發生更改時,會在 HTMLSlotElement 例項(<slot> 元素)上觸發。

示例

以下程式碼段摘自我們的 slotchange 示例也可在此處檢視即時效果)。

js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

在這裡,我們獲取所有插槽的引用,然後為模板中的第二個插槽新增一個 slotchange 事件監聽器——在示例中,這個插槽的內容會不斷變化。

每次插入到插槽中的元素髮生變化時,我們都會向控制檯記錄一份報告,說明哪個插槽發生了變化,以及插槽內的新節點是什麼。

規範

規範
HTML
# htmlslotelement

瀏覽器相容性