Slot 是 Web Components 中实现内容分发的核心机制，作为 Shadow DOM 中的轻量级占位符，按 name 属性或默认规则将 Light DOM 内容投射到指定位置，并支持 fallback、slotchange 事件及现代浏览器原生兼容。
Slot 标签是 Web Components 中实现内容分发（Content Distribution）的核心机制，它让开发者能将 Light DOM 中的内容“插入”到 Shadow DOM 的指定位置，从而构建可复用、封装良好的自定义元素。
Slot 是什么：轻量级的“内容插槽”
Slot 不是独立组件，而是 Shadow DOM 中的一个占位符。它本身不渲染内容，只定义“这里可以放什么”。当自定义元素被使用时，外部传入的 HTML 片段（Light DOM）会根据 slot 的 name 属性或默认规则，被投射（distributed）到 Shadow DOM 对应的 slot 节点中。
例如：
<my-card><h2 slot="title">欢迎卡片</h2>
<p>这是主体内容</p>
</my-card>
在 my-card 的 shadow root 中若有：
<slot name="title"></slot>
<slot></slot>
那么 <h2 slot="title"> 就会被投射到第一个 slot，<p> 作为匿名内容投射到第二个（默认）slot。
默认 slot 与具名 slot 的匹配逻辑
内容分发依赖两个关键规则：
立即学习“前端免费学习笔记（深入）”；
- 带
slot="xxx"属性的元素，只匹配 Shadow DOM 中<slot name="xxx"> - 没有
slot属性的元素，尝试匹配第一个 无 name 属性 的<slot>；若无，则被丢弃（不渲染） - 多个同名 slot 时，所有匹配元素按 Light DOM 顺序依次插入各 slot（每个 slot 独立接收一份副本）
- 未被任何 slot 匹配的节点，不会出现在渲染结果中（但仍在 Light DOM 中存在）
slotchange 事件与动态内容响应
当 Light DOM 内容变化（如新增/移除带 slot 属性的子元素），对应 slot 会触发 slotchange 事件。这可用于响应式更新内部状态或重新计算布局：
- 监听方式：
shadowRoot.querySelector('slot').addEventListener('slotchange', handler) - 注意：该事件不冒泡，也不捕获，只能直接绑定在 slot 元素上
- 首次渲染时不会触发，仅在后续内容变更时触发
兼容性与常见误区
Slot 是现代浏览器（Chrome 53+、Firefox 63+、Safari 10.1+、Edge 79+）原生支持的特性，无需 polyfill。但需注意：
- slot 只对 直系子元素 生效 —— 嵌套在其他自定义元素或 div 中的内容不会被自动识别为可投射节点
- 不能在 slot 内部再定义 slot（即 slot 不支持嵌套分发）
- 使用
<slot><span>后备内容</span></slot>可设置 fallback，当无匹配内容时显示 - Shadow DOM 的
mode: 'closed'会阻止 JavaScript 访问 slot 分发细节，但不影响渲染行为
