HTMLSlotElement: assign() 方法

基线 2023

新可用

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

assign() 方法是 HTMLSlotElement 接口的一个方法，用于将插槽的手动分配节点设置为可插槽元素的有序集合。手动分配的节点集最初为空，直到使用 assign() 分配节点。

注意：您不能混合手动（命令式）和命名（声明式，自动）插槽分配。因此，要使此方法起作用，影子树需要使用 slotAssignment: "manual" 选项创建。

语法

assign(node1)
assign(node1, node2)
assign(node1, node2, /* …, */ nodeN)

参数

node1, …, nodeN: 一组 Element 或 Text 节点。

返回值

无 (undefined).

异常

NotAllowedError DOMException: 在自动分配的插槽上调用此方法时抛出。

示例

在下面的示例中，assign() 方法用于在选项卡式应用程序中显示正确的选项卡。调用该函数并传递要显示的面板，然后将其分配给插槽。

function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;
  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();
  }
}

规范

规范
HTML 标准 # dom-slot-assign

浏览器兼容性

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

另请参阅

Element.attachShadow()