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 |
浏览器兼容性
加载中…