slot属性仅在shadow dom中生效，需自定义元素调用attachshadow、slot属性作用于直系子元素、且与严格字符串匹配，否则内容静默丢弃。
slot 属性不是全局属性，它只在 Web Components 的 Shadow DOM 环境中参与内容分发，且必须与 <slot></slot> 元素配对、严格匹配、层级正确才能生效。单独写 slot="header" 在普通 HTML 中毫无作用。
为什么 slot 属性写了却没渲染？
根本原因：浏览器只在 Shadow DOM 分发阶段解析 slot 属性，Light DOM 中的该属性被完全忽略。
- 没调用
this.attachShadow({ mode: 'open' })→slot属性不进入分发流程，也不报错 -
<slot name="header"></slot>写在 Light DOM（比如直接塞进<my-card><slot></slot></my-card>）→ 它只是个无意义标签 - 外部节点嵌套过深：
<my-card><div><h2 slot="header">标题</h2></div></my-card>→<h2></h2>是孙节点，不参与匹配 - 大小写或空格不一致：
slot="Header"对不上name="header"，字符串级精确比对，零容忍
slot 属性和 <slot></slot> 元素的配对规则
这不是“绑定”或“引用”，而是浏览器在 attachShadow 后执行的一次性静态匹配，发生在元素插入 DOM 时。
- 一个
<slot name="actions"></slot>只接收 Light DOM 中所有slot="actions"的**直系子元素**（按顺序逐个填入） - 多个同名
<slot name="item"></slot>会依次分配：第一个slot="item"节点 → 第一个<slot name="item"></slot>，第二个节点 → 第二个 slot，以此类推 - 没带
slot属性的节点（如<p>正文</p>）只尝试填入第一个无name的<slot></slot>；后续空<slot></slot>不再接收 -
<slot>默认文案</slot>仅在assignedNodes().length === 0时显示；哪怕有一个空文本节点（如换行符），它也不会出现
调试 slot 属性是否起效的关键检查点
别依赖肉眼查看 DOM 渲染结果——真正决定内容是否投射的是 assignedNodes() 返回值，而它极易因时机或模式出错。
- 在
connectedCallback里立刻查slot.assignedNodes()→ 几乎必为空，因为分发尚未完成 - 应监听
slotchange事件：slot.addEventListener('slotchange', () => console.log(slot.assignedNodes({ flatten: true }))) - 用了
{ mode: 'closed' }→this.shadowRoot为null，querySelector('slot')失败，但渲染仍正常，容易误判为“失效” - DevTools 中选中自定义元素 → Elements 面板展开
#shadow-root→ 找到<slot></slot>→ 右键 “Break on” → “attribute modifications” 可捕获投射触发点
最常被忽略的其实是“时机”和“层级”：slot 分发不是持续监听，而是一次性快照；直系子节点约束也不是建议，而是硬性规则——任何中间 wrapper 都会切断匹配链。写完 slot="xxx" 后，先确认它是不是紧贴在自定义元素闭合标签前的子节点，再查 shadowRoot 是否已挂载、<slot name="xxx"></slot> 是否真在 shadowRoot 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
