slot name属性必须是静态字符串，仅支持引号包裹的字面量，不支持动态绑定、模板语法或js表达式；匹配严格区分大小写、空格和连字符，且仅当存在同名slot时内容才分发，否则静默丢弃。
slot name 属性必须是静态字符串
HTML 原生 <slot></slot> 的 name 属性不支持任何动态写法，只能写死为纯字面量。浏览器在解析时不会执行 JS 表达式、模板语法或属性绑定。
常见错误包括：
-
<slot :name="headerName"></slot>（Vue 语法，但未用v-bind时实际生成的是name="headerName"字符串） -
<slot name="{{ headerName }}"></slot>（模板引擎写法，在 HTML 源码中无效） -
<slot name="${slotName}"></slot>（ES6 模板字符串仅在 JS 字符串构造中有效，不能直接写在 HTML 标签里）
正确写法只有：<slot name="header"></slot>、<slot name="user-avatar"></slot>、<slot name="footer-2026"></slot>——全部是引号包裹的静态值。
具名插槽匹配严格区分大小写和空格
浏览器对 slot 和 <slot name="..."></slot> 的匹配是字符串级精确比对，一个字母、一个连字符、一个首尾空格都不能差。
以下全部不匹配：
-
<slot name="Header"></slot>vs<div slot="header"></div> -
<slot name="sidebar"></slot>vs<aside slot="side-bar"></aside> -
<slot name="main"></slot>vs<main slot=" main"></main>（开头空格）
调试时可直接检查：document.querySelector('slot[name="header"]').assignedNodes().length 返回 0 就说明没匹配上，不是内容为空，而是压根没分发进来。
多个同名 slot 元素只生效第一个
如果子组件里写了两个 <slot name="title"></slot>，父组件传入的 <h1 slot="title">Hello</h1> 只会出现在第一个位置，第二个 <slot></slot> 始终为空。
这不是 bug，是 HTML 规范行为。需要重复渲染同一类内容时，应改用：
- 循环渲染多个不同 name 的插槽（如
title-1、title-2） - 用默认插槽 + CSS
display: flex或grid控制布局 - 在框架中改用作用域插槽（
slot-scope或v-slot）传递数据并由父组件决定渲染逻辑
未声明插槽的内容会被静默丢弃
父组件写了 <div slot="aside">侧边栏</div>，但子组件里没有 <slot name="aside"></slot>，也不会报错或警告——内容直接从 DOM 中消失，不可见也不可访问。
尤其容易踩坑的是：子组件忘了加默认插槽 <slot></slot>，结果所有无 slot 属性的内容全丢了；或者只写了具名插槽却没留兜底的默认插槽，导致 slot="unknown" 或无 slot 属性的内容被吞掉。
fallback 内容（如 <slot name="header">默认标题</slot>）只在完全没有任何节点匹配该 name 时才显示；哪怕匹配到一个空节点（<div slot="header"></div>），fallback 也不会出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
