ShadowRoot: slotAssignment 屬性
ShadowRoot 介面的只讀 slotAssignment 屬性會返回 Shadow DOM 樹的插槽分配模式。節點會被自動分配（named）或手動分配（manual）。該屬性的值是在呼叫 Element.attachShadow() 時使用 slotAssignment 選項定義的。
值
一個字串，可以是以下值之一：
named-
元素會被自動分配到此 Shadow Root 中的
<slot>元素。宿主（host）中帶有slot屬性的任何後代，且該屬性值匹配此 Shadow Root 中<slot>元素的name屬性，都將被分配到該插槽。宿主中任何沒有slot屬性的頂層子元素，如果存在一個沒有name屬性的<slot>（即“預設插槽”），則會被分配到該插槽。 manual-
元素不會自動分配到
<slot>元素。相反，它們必須使用HTMLSlotElement.assign()手動分配。
示例
在下面的示例中，assign() 方法用於顯示製表應用程式中的正確選項卡。該函式被呼叫並傳入要顯示的面板，然後該面板被分配到插槽。我們測試 slotAssignment 是否為 named，以防止在呼叫 HTMLSlotElement.assign() 時引發異常。
js
function UpdateDisplayTab(elem, tabIdx) {
const shadow = elem.shadowRoot;
// This test is usually not needed, but can be useful when debugging
if (shadow.slotAssignment === "named") {
console.error(
"Trying to manually assign a slot on an automatically-assigned (named) slot",
);
}
const slot = shadow.querySelector("slot");
const panels = elem.querySelectorAll("tab-panel");
if (panels.length && tabIdx && tabIdx <= panels.length) {
slot.assign(panels[tabIdx - 1]);
} else {
slot.assign();
}
}
規範
| 規範 |
|---|
| DOM # dom-shadowroot-slotassignment |
瀏覽器相容性
載入中…