slot标签是硬性开关，仅在shadow dom中生效；需满足自定义元素注册、attachshadow调用、slot置于shadow dom内三个前提，否则静默失效且无提示。
slot 标签在复杂文档结构中不是“增强功能”，而是“硬性开关”——没满足三个前提，它就彻底失效，且不报错、不警告、不提示。
为什么写了 <slot></slot> 却什么也不显示
最常被忽略的其实是执行环境：slot 只在 Shadow DOM 里起作用，普通 HTML 页面里直接写 <slot></slot> 就是无效标签。它不会被解析为占位符，也不会触发任何逻辑，浏览器当它不存在。
- 自定义元素未注册（
customElements.define('my-modal', MyModal)没执行）→ slot 不参与分发 - 构造函数里漏了
this.attachShadow({ mode: 'open' })→ 整个 Shadow Root 没挂上，<slot></slot>被当作文本节点渲染出来（你甚至能看到字面量<slot></slot>） -
<slot></slot>写在 Light DOM 里（比如直接塞进<my-modal></my-modal>标签内部）→ 它根本不在 Shadow DOM 中，自然不生效
多层嵌套下内容无法进入 <slot></slot> 的真实原因
slot 分发只认直系子节点，中间插一个 wrapper 元素或换行符，就会断链。这不是“层级太深”，而是浏览器严格按 DOM 树层级匹配。
- ✅ 正确：
<my-card><h2 slot="header">标题</h2> <p>正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a> <p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p> </div> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></my-card>——<h2></h2>和<p></p>都是<my-card></my-card>的第一层子节点 - ❌ 失效：
<my-card><div><h2 slot="header">标题</h2></div></my-card>——<h2></h2>是<div> 的子节点，不是 <code><my-card></my-card>的直系子节点 - ⚠️ 隐形失效：
<my-card>\n <h2 slot="header">标题</h2>\n</my-card>—— 换行和缩进生成的 Text 节点会成为第一个子节点，<h2></h2>实际是第二个子节点，不被默认 slot 接收（除非显式用assignedNodes({ flatten: true })调试） -
<slot name="footer"></slot>只接收<div slot="footer">，<code><div slot="Footer"> 或 <code><div slot="footer ">（末尾空格）全部不匹配 <li>具名 slot 不支持通配符或模糊匹配，<code><slot name="actions"></slot>和<button slot="action"></button>永远不搭界 - 没写
name的<slot></slot>默认 name 是"default"，它只收所有没带slot属性的直系子节点；一旦某个子节点写了slot="xxx"，它就自动脱离默认 slot 管辖范围 - ✅ 有效：
::slotted(h2) { color: blue; }—— 外部传入的<h2></h2>会被染蓝 - ❌ 无效：
::slotted(.card h2) { color: red; }——.card是外部传入结构里的类名，但::slotted()不支持后代选择器 - ⚠️ 注意：
::slotted(*)会匹配所有直系子元素，但无法控制其子元素；想改<h2><em>强调</em></h2>里的<em></em>，得靠外部全局样式或把<em></em>提到 slot 直系层级
slot 属性与 name 匹配失败的细节陷阱
匹配不是“看起来像就行”，而是字符串完全一致，大小写、空格、连字符都算数。出错时别猜，直接查 DOM：
样式穿透不到 slot 内容？别怪 ::slotted() 不给力
::slotted() 不是万能选择器，它只影响被投射进来的**直系子元素本身**，不递归、不嵌套、不继承。
真正卡住人的从来不是语法多难，而是 slot 生效链条太长：自定义元素注册 → attachShadow → slot 写进 shadowRoot → 外部内容必须是直系子节点 → name 和 slot 属性字符串完全一致 → 浏览器才开始分发。任一环节断开，内容就静默消失，连 console 都不会吭一声。
