slot属性仅在Shadow DOM中生效，需严格匹配大小写与层级结构，直系子元素才能被正确分发，否则内容静默消失。
slot 属性不是“随便加就能用”的全局属性，它只在 Web Components 的 Shadow DOM 环境下生效，且必须与 slot 元素严格配对；写错大小写、多一层包裹、漏掉 attachShadow()，内容就直接消失——不报错，也不渲染。
slot 属性匹配只看字符串完全相等，区分大小写且不支持通配符
具名插槽的绑定是纯字符串比对，不是模糊匹配，也不是靠标签名或 class 推断：
-
<slot name="header"></slot>只匹配<h1 slot="header">标题</h1>，slot="Header"、slot="header-text"、slot="HEADER"全部失效 - 没写
name的<slot></slot>默认 name 是"default"，只接收所有未带slot属性的直系子元素（如<p>正文</p>），不会收<div slot="xxx"></div> - 多个同名
<slot name="item"></slot>时，每个都会收到一个对应slot="item"的节点（按顺序分发），不是广播复制，也不是合并到一处
slot 属性必须作用于自定义元素的直系子元素，嵌套一层就失效
这是最常被忽略的结构约束：slot 内容分发只检查 Light DOM 中自定义元素的**第一层子节点**，中间不能有 wrapper：
- ✅ 有效：
<my-card><h2 slot="title">卡片标题</h2><p>内容</p></my-card> - ❌ 失效：
<my-card><section><h2 slot="title">标题</h2></section></my-card>——<h2>被<section>隔开，不会被任何<slot>接收 - 空格和换行也算文本节点：
<my-card>\n <h2 slot="title">标题</h2>\n</my-card>中的换行符会成为第一个子节点，导致<h2>实际是第二个子节点，可能错位
slot 属性值必须是静态字符串，不能是 JS 表达式或绑定结果
原生 Web Components 不支持运行时解析 slot 名，所有 slot 属性值都得是 HTML 字面量：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<button slot="action">确定</button> - ❌ 错误：
<button :slot="currentSlot">按钮</button>（Vue 模板语法，原生不识别） - ❌ 错误：
<button slot={dynamicName}>按钮</button>（JSX 或模板字符串，浏览器直接当无效属性丢弃） - 动态场景只能靠 JS 手动切换：先移除旧节点，再插入带正确
slot属性的新节点，或用setAttribute('slot', newValue)显式更新
没内容渲染？别只看页面，用 assignedNodes() 查真实分发状态
slot 不渲染通常不是样式问题，而是内容根本没被分配进来。浏览器不会报错，但你可以立刻验证：
- 在自定义元素内部执行：
this.shadowRoot.querySelector('slot[name="header"]').assignedNodes() - 返回空数组 → 说明没节点被投射进来，大概率是父子层级不对、
slot属性拼错、或没调用attachShadow() - 返回包含文本节点 → 注意检查是否混入了空格/换行，它们会让默认插槽“以为有内容”，从而不显示 fallback 文本
-
assignedElements()只返回元素节点，适合过滤掉纯文本干扰
真正难调试的从来不是语法，而是“看似写了却没生效”——slot 的契约感极强：你声明一个 <slot name="footer">，就是在要求使用者必须提供一个 slot="footer" 的直系子元素，少一个字符、多一层 DOM、晚一秒挂载，它就安静地放弃工作。这种静默失败，才是日常开发里最该提前设防的地方。
