HTMLSlotElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

影子 DOM APIHTMLSlotElement 接口用于访问 HTML <slot> 元素的名称和分配的节点。

EventTarget Node Element HTMLElement HTMLSlotElement

实例属性

还继承了其父接口 HTMLElement 的属性。

HTMLSlotElement.name

用于获取和设置插槽的名称的字符串。

实例方法

还继承了其父接口 HTMLElement 的方法。

HTMLSlotElement.assign()

将此插槽的手动分配节点设置为给定的节点。

HTMLSlotElement.assignedNodes()

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

HTMLSlotElement.assignedElements()

返回分配给该插槽的元素序列(且不包括其他节点)。如果 flatten 选项设置为 true,则返回分配给该插槽的元素序列,以及分配给该插槽所有后代插槽的元素序列。如果未找到分配的元素,则返回插槽的回退内容。

事件

还继承了其父接口 HTMLElement 的事件。

使用 addEventListener() 或通过将事件监听器赋值给该接口的 oneventname 属性来监听这些事件。

slotchange

当插槽中包含的节点发生变化时,在 HTMLSlotElement 实例(<slot> 元素)上触发此事件。

示例

以下代码片段来自我们的 slotchange 示例也可以在线查看)。

js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `插槽“${slots[1].name}”中的元素已更改为“${nodes[0].outerHTML}”。`,
  );
});

在这里,我们获取所有插槽的引用,然后为模板中的第二个插槽添加一个 slotchange 事件监听器——这个插槽在示例中不断更改其内容。

每次插入到插槽中的元素发生变化时,我们会在控制台记录一条报告,指出哪个插槽发生了变化,以及插槽内的新节点是什么。

规范

Specification
HTML
# htmlslotelement

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLSlotElement
assign
assignedElements
assignedNodes
name
slotchange event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.