slot标签是硬性开关，仅在Shadow DOM中生效；需满足自定义元素注册、attachShadow调用、slot置于Shadow DOM内三个前提，否则静默失效且无提示。
slot 标签在复杂文档结构中不是“增强功能”，而是“硬性开关”——没满足三个前提，它就彻底失效，且不报错、不警告、不提示。
为什么写了 <slot> 却什么也不显示
最常被忽略的其实是执行环境：slot 只在 Shadow DOM 里起作用，普通 HTML 页面里直接写 <slot> 就是无效标签。它不会被解析为占位符，也不会触发任何逻辑，浏览器当它不存在。
- 自定义元素未注册（
customElements.define('my-modal', MyModal)没执行）→ slot 不参与分发 - 构造函数里漏了
this.attachShadow({ mode: 'open' })→ 整个 Shadow Root 没挂上，<slot>被当作文本节点渲染出来（你甚至能看到字面量<slot>） -
<slot>写在 Light DOM 里（比如直接塞进<my-modal></my-modal>标签内部）→ 它根本不在 Shadow DOM 中，自然不生效
多层嵌套下内容无法进入 <slot> 的真实原因
slot 分发只认直系子节点，中间插一个 wrapper 元素或换行符，就会断链。这不是“层级太深”，而是浏览器严格按 DOM 树层级匹配。
- ✅ 正确：
<my-card><h2 slot="header">标题</h2><p>正文</p></my-card>——<h2>和<p>都是<my-card>的第一层子节点 - ❌ 失效：
<my-card><div><h2 slot="header">标题</h2></div></my-card>——<h2>是<div>的子节点，不是<my-card>的直系子节点 - ⚠️ 隐形失效：
<my-card>\n <h2 slot="header">标题</h2>\n</my-card>—— 换行和缩进生成的 Text 节点会成为第一个子节点，<h2>实际是第二个子节点，不被默认 slot 接收（除非显式用assignedNodes({ flatten: true })调试）
slot 属性与 name 匹配失败的细节陷阱
匹配不是“看起来像就行”，而是字符串完全一致，大小写、空格、连字符都算数。出错时别猜，直接查 DOM：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<slot name="footer">只接收<div slot="footer">，<div slot="Footer">或<div slot="footer ">（末尾空格）全部不匹配 - 具名 slot 不支持通配符或模糊匹配，
<slot name="actions">和<button slot="action">永远不搭界 - 没写
name的<slot>默认 name 是"default"，它只收所有没带slot属性的直系子节点；一旦某个子节点写了slot="xxx"，它就自动脱离默认 slot 管辖范围
样式穿透不到 slot 内容？别怪 ::slotted() 不给力
::slotted() 不是万能选择器，它只影响被投射进来的**直系子元素本身**，不递归、不嵌套、不继承。
- ✅ 有效：
::slotted(h2) { color: blue; }—— 外部传入的<h2>会被染蓝 - ❌ 无效：
::slotted(.card h2) { color: red; }——.card是外部传入结构里的类名，但::slotted()不支持后代选择器 - ⚠️ 注意：
::slotted(*)会匹配所有直系子元素，但无法控制其子元素；想改<h2><em>强调</em></h2>里的<em>，得靠外部全局样式或把<em>提到 slot 直系层级
真正卡住人的从来不是语法多难，而是 slot 生效链条太长：自定义元素注册 → attachShadow → slot 写进 shadowRoot → 外部内容必须是直系子节点 → name 和 slot 属性字符串完全一致 → 浏览器才开始分发。任一环节断开，内容就静默消失，连 console 都不会吭一声。
