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