HTMLSlotElement: assignedNodes() 方法

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中都能正常工作。自以下日期起，它已在各个浏览器中可用 2020年1月.

assignedNodes() 方法是 HTMLSlotElement 接口的一个方法，它返回分配给此插槽的节点序列。

如果 flatten 选项设置为 true，则它会返回分配给此插槽的节点序列，以及分配给此插槽任何后代插槽的节点序列。如果未找到任何分配的节点，则它会返回插槽的回退内容。

语法

js
assignedNodes()
assignedNodes(options)

参数

options 可选

一个对象，用于设置要返回的节点的选项。可用的选项为

flatten

一个布尔值，指示是否返回任何可用的子 <slot> 元素（true）的分配节点，或者不返回（false）。默认为 false。

返回值

一个节点数组。

示例

以下代码段取自我们的 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 标准
# dom-slot-assignednodes-dev

浏览器兼容性

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