ShadowRoot: slotAssignment 属性

基线 2023

新功能

自 2023 年 3 月起，此功能在最新的设备和浏览器版本中均有效。此功能可能在旧设备或浏览器中无法使用。

只读的 slotAssignment 属性是 ShadowRoot 接口的属性，用于返回影子 DOM 树的插槽分配模式。节点是自动分配（named）还是手动分配（manual）。此属性的值使用 slotAssignment 选项在调用 Element.attachShadow() 时定义。

值

一个可以是以下值之一的字符串：

named

元素会自动分配到此影子根内的 <slot> 元素。主机的所有后代节点，其 slot 属性与此影子根内 <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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅