"slotchange 事件：Shadow DOM 插槽内容管理"

概述`<slot>` 在其分发的节点变化时触发 `slotchange`，组件可在事件中读取有效分发内容并更新内部状态或样式。示例<template id="tpl"> <style>.badge{display:none}</style> <slot></slot> <span class="badge">New</span> </template> <script> customElements.define('x-item', class extends HTMLElement{ constructor(){ super(); const root = this.attachShadow({mode:'open'}); root.append(document.getElementById('tpl').content.cloneNode(true)); this._badge = root.querySelector('.badge'); const slot = root.querySelector('slot'); slot.addEventListener('slotchange', ()=>{ const nodes = slot.assignedElements(); this._badge.style.display = nodes.length ? 'inline-block' : 'none' }) } }) </script> 工程建议性能：在事件中做最小化计算；避免强同步布局读取。语义：确保插槽用途清晰；对空插槽定义合理默认状态。兼容：广泛支持；在旧环境回退到 MutationObserver。参考与验证MDN `slotchange` 文档：https://developer.mozilla.org/docs/Web/API/HTMLSlotElement/slotchange_event