具名插槽的 name 属性必须严格字符串匹配，大小写敏感且不支持动态绑定，浏览器静默丢弃不匹配内容；默认插槽为无 name 的 slot 元素，重复同名插槽仅首个生效。
slot 的 name 属性不是“怎么用”的问题，而是“必须严格匹配才能用对”。不一致就静默失效，不报错、不提示、内容直接消失。
name 值大小写必须完全一致
浏览器对 name 执行字符串级精确比对，Header ≠ header ≠ HEADER。哪怕一个字母错了，内容就进不了插槽。
-
<slot name="Header"></slot>只接收<h2 slot="Header"></h2> -
<h2 slot="header"></h2>会被丢进默认插槽（如果存在），否则静默丢弃 - 所有主流浏览器（Chrome/Firefox/Safari/Edge）行为完全一致，这不是兼容性问题，是 HTML 规范强制要求
name 不支持动态绑定或表达式
name 是纯静态 HTML 属性，不能在模板里写 <slot :name="headerName"></slot> 或 <slot name="{{ headerName }}"></slot> —— 这些写法解析出来就是字面量字符串 "headerName"，不是变量值。
- 有效写法只有：
<slot name="user-avatar"></slot>、<slot name="sidebar"></slot> - 想实现条件切换？得靠多个固定
<slot name="a"></slot>+v-if控制显隐，而不是试图“动态改 name” - 用 JS 动态调用
element.setAttribute('slot', 'xxx')也无效：slot 分配发生在元素连接 DOM 时（connectedCallback），后续改属性不触发重分配
具名插槽和默认插槽共存规则
一个组件里可以有多个具名插槽，但只能有一个无 name 的 <slot></slot>，它只收容所有未被具名插槽匹配的节点。
-
<slot name="header"></slot>、<slot></slot>、<slot name="footer"></slot>是合法组合 -
<h1 slot="header">标题</h1>→ 进第一个插槽 -
<p slot="footer">版权</p>→ 进第三个插槽 -
<div>没 slot 属性</div>或<span slot="unknown">乱写名字</span>→ 全部进中间那个默认插槽 - 重复声明同名插槽（如两个
<slot name="title"></slot>）允许，但内容只进第一个，其余为空
调试时怎么确认 name 是否匹配成功
最直接的办法是查 assignedNodes()：
const slotEl = document.querySelector('slot[name="header"]');
console.log(slotEl.assignedNodes()); // 返回空数组？说明没匹配上
常见误判点：
- 父组件写了
<div slot="Header"></div>，子组件却是<slot name="header"></slot>→ 大小写不一致，assignedNodes()返回[] - 子组件根本没定义
<slot name="header"></slot>，父组件却写了slot="header"→ 内容留在 light DOM 里不动，也不报错 - 用了
<slot name="default"></slot>—— 这是无效写法，原生没有default这个保留名；默认插槽就是无name的<slot></slot>
真正容易被忽略的不是语法怎么写，而是 slot 分发发生在 DOM 解析阶段，不是运行时响应式过程。一旦连上，匹配就定死了——改 name、改 slot 属性、改内容文本，都不会自动重分发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
