slot是浏览器原生的Shadow DOM内容分发机制，需满足三条件：挂载open模式Shadow Root、内容为直系子元素、slot标签位于Shadow DOM内；匹配严格区分默认/具名插槽，后备内容仅在无投递时显示，本质是投影而非移动，样式与事件均遵循Light DOM规则。
slot 标签不是语法糖，也不是框架特性——它是浏览器原生实现的、仅在 Shadow DOM 中生效的内容分发机制。 写了 <slot> 却没内容显示？八成是没挂 Shadow Root，或内容没写成直系子元素。
为什么 slot 不渲染？最常踩的三个硬性条件
slot 的工作完全依赖 Web Components 基础设施，缺一不可：
- 必须在自定义元素构造函数中调用
this.attachShadow({ mode: 'open' })—— 没这句，<slot>就是普通标签，不参与任何分发 - 外部传入的内容必须是自定义元素的**直系子节点**：
<my-card><h2 slot="header">标题</h2></my-card>✅；<my-card><div><h2 slot="header">标题</h2></div></my-card>❌（被<div>隔开一层，直接丢弃） -
<slot>必须出现在 Shadow DOM 模板内，不能写在 Light DOM 里（比如放在<my-card></my-card>标签之间）
默认插槽 vs 具名插槽：匹配规则很严格
匹配靠的是精确字符串比对，不是模糊查找：
- 没写
slot属性的元素（如<p>正文</p>），只尝试塞进第一个无name的<slot>；后面所有无name的<slot>全部忽略 -
<slot name="header"></slot>只接收<h2 slot="header"></h2>；slot="Header"、slot="header-text"、slot='header '（带空格）全部不匹配 - 后备内容（fallback）只在没内容可投递时显示：
<slot><p>缺省文案</p></slot>
内容去哪了？理解“投影”而非“移动”
slot 分发的本质是**投影（projection）**，不是 DOM 移动：
立即学习“前端免费学习笔记（深入）”；
- 内容始终保留在 Light DOM 中，
<slot>只是它的“显示窗口”；这意味着样式默认不受 Shadow DOM 影响，要用::slotted(*)或 CSS 自定义属性穿透控制 - 事件冒泡路径走的是 Light DOM，不是 Shadow DOM 内部路径；想监听投递内容的点击，得在 Light DOM 节点上绑，不能只查
shadowRoot - 查分发后的内容不能用
querySelector，得用slot.assignedNodes()或slot.assignedElements()
和 Vue / React 的 slot 完全不是一回事
HTML 原生 <slot> 不支持作用域插槽，也不传递数据：
- 它只做一件事：把 Light DOM 节点按规则“投射”到 Shadow DOM 的占位位置，不解析
v-slot、slot-scope这类 Vue 专属语法 - 无法访问宿主组件内部状态，比如你不能在
<slot>里直接用this.count或绑定子组件的数据 - 混用原生 Web Components 和 Vue 组件时，别指望
slot="xxx"在 Vue 模板里还能被原生<slot name="xxx">接收到——Vue 会先编译掉它
真正容易被忽略的是：slot 的后备内容、::slotted() 的样式限制、以及事件冒泡路径与 Light DOM 的强绑定——这些不像 JS 错误那样报红，但会让交互和样式表现变得难以调试。
