HTMLSlotElement: slotchange 事件
当 <slot> 元素 (HTMLSlotElement 实例) 中包含的节点发生变化时，会在此元素上触发 slotchange 事件。
注意： 如果被插槽的节点内的子节点发生变化，slotchange 事件不会触发——只有在你更改（例如添加或删除）实际节点本身时才会触发。
为了触发 slotchange 事件，必须设置或移除 slot 属性。
此事件不可取消。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("slotchange", (event) => { })
onslotchange = (event) => { }
事件类型
一个通用的 Event。
示例
js
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null
以下代码片段来自我们的 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}".`,
);
});
在这里，我们获取所有 <slot> 元素的引用，然后为模板的第二个插槽添加 slotchange 事件监听器——在示例中，这个插槽的内容会被更改。
每次插入到插槽中的元素发生变化时，我们都会向控制台记录一份报告，说明哪个插槽发生了变化，以及插槽内的新节点是什么。
规范
| 规范 |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |
浏览器兼容性
加载中…
另见
HTMLSlotElement