是 Shadow DOM 内容分发的原生机制，作为占位符决定 light DOM 中哪些节点被投影到 shadow root 中；它不渲染自身，匹配依赖 name 属性和默认行为，且分发是响应式的。
什么是 <slot></slot>，它在 Shadow DOM 里起什么作用
<slot></slot> 不是自定义标签，也不是 Web Components 的“插件”，它是 Shadow DOM 内容分发（content distribution）的原生机制。没有它，外部传入的 HTML 节点就卡在 light DOM 里，根本进不了 shadow root——你写的 shadowRoot.innerHTML = '...' 再漂亮，也盖不住用户实际放进去的内容。
关键点在于：<slot></slot> 是一个占位符，它不渲染自身，只决定 light DOM 中哪些节点被“投影”（projected）进来。浏览器在构建渲染树时，会把匹配的外部内容“挪”到 slot 的位置，而不是复制或移动 DOM 节点本身。
如何正确声明 slot 并让外部内容命中它
最常见错误是以为写个 <slot></slot> 就万事大吉。其实 slot 匹配靠的是 name 属性和默认行为：
- 无
name的<slot></slot>是“默认插槽”，只接收那些没被其他具名 slot 拦截的顶层子节点（注意：不是所有后代，仅直接子节点） - 带
name="header"的<slot name="header"></slot>只匹配外部写了slot="header"的元素，比如<h1 slot="header">标题</h1> - 如果外部有节点带
slot属性但没对应<slot name="xxx"></slot>，该节点会被丢弃（不渲染），不会 fallback 到默认 slot - 多个同名
<slot></slot>是允许的，但内容只会被第一个匹配的 slot 接收（后续 slot 显示为空）
示例：组件模板中写 <div class="card">
<slot name="title"></slot><slot></slot>
</div>，则外部必须用 <my-card><h2 slot="title">我的标题</h2>
<p>正文内容</p></my-card> 才能正确分发。
在自定义元素中使用 attachShadow() 后怎么插入 slot
slot 必须写在 shadow root 内部，不能靠 JS 动态 append 进去——因为 slot 是编译期语义，不是运行时 DOM 节点。常见误操作是：
- 在
connectedCallback里用shadowRoot.appendChild(document.createElement('slot'))→ 无效，slot 元素不会起作用 - 用
innerHTML插入字符串含<slot></slot>→ 可以，但要注意 HTML 解析上下文（比如 script 标签不会执行） - 推荐做法：在
constructor或connectedCallback中调用this.attachShadow({mode: 'open'})，然后直接用shadowRoot.innerHTML = `<slot name="icon"></slot><span><slot></slot></span>`
注意：innerHTML 方式对 slot 安全，但若需绑定事件或动态控制 slot 内容，应改用 document.createElement('slot') + shadowRoot.append()，只要确保是在 attachShadow 之后、且 slot 是直接 append 到 shadowRoot 或其子元素下即可。
为什么 slot 内容看起来“没更新”或“错位”，常见陷阱有哪些
slot 本身不触发重渲染，但它背后的 content 分发是响应式的——问题往往出在时机和结构上：
- 在
connectedCallback之前访问shadowRoot.querySelector('slot').assignedNodes()会返回空数组，因为此时 light DOM 子节点还没完成分发 -
assignedNodes({flatten: true})能看到最终投影结果，但别在每次 render 里反复调用，它开销不小 - slot 不支持 CSS 选择器穿透：你在 shadow 内写的
slot::slotted(p)可以样式化被投影的<p></p>，但slot::slotted(.foo > span)无效（不支持后代选择器） - 若组件用了
mode: 'closed'，外部无法通过element.shadowRoot访问 slot 状态，调试困难，建议开发期用'open'
真正容易被忽略的是：slot 分发发生在浏览器布局前，但如果你在 requestAnimationFrame 里才读取 assignedNodes()，可能拿到的是旧快照——除非你明确监听 slotchange 事件。
