例項屬性
它還繼承了其父介面 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 |
瀏覽器相容性
載入中…