具名插槽匹配失败导致内容“消失”但无报错，主因是name属性字符串级精确匹配失败，如大小写、空格、连字符不一致；同名插槽仅渲染第一个；原生web components不支持动态slot值；fallback仅在无任何匹配节点时生效。
具名插槽匹配失败的常见现象
内容“消失”但控制台无报错，是最典型的信号。比如你在子组件写了<slot name="header"></slot>，父组件用了<h1 slot="Header">标题</h1>，结果 header 区域一片空白——问题就出在大小写不一致。Header ≠ header，连一个字母都不能差。同理，slot="header ">（末尾空格）或slot="header-2"也完全不匹配。
name属性必须严格一致：大小写、连字符、空格全算数
匹配是字符串级精确比对，不是模糊查找。以下全部无效：
-
<slot name="footer"></slot>不接收<p slot="Footer">©2024</p> -
<slot name="user-info"></slot>不接收<div slot="userinfo">...</div> -
<slot name="main"></slot>不接收<section slot=" main">...</section>（开头空格）
Web Components 和 Vue 的 v-slot 都遵循这一规则，没有例外。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
多个同名插槽节点只分发第一个
如果你写了两个<h2 slot="title">A</h2>和<h2 slot="title">B</h2>，只有 A 会出现在<slot name="title"></slot>位置，B 被忽略。这不是 bug，是规范行为。需要多实例时，应改用作用域插槽或循环渲染，而不是堆叠同名 slot 属性节点。
动态 slot 名在原生 Web Components 中不支持
原生 <slot></slot> 的 slot 属性值必须是静态字符串，不能是 JS 表达式或绑定。下面这行在纯 HTML/JS 自定义元素中会失效：<h3 :slot="currentSection">内容</h3>（Vue 语法）或<h3 slot="{{sectionName}}">内容</h3>（模板引擎写法）。真要动态，得用 JS 手动切换 element.setAttribute('slot', name)，或者换用框架的响应式插槽机制。
最容易被忽略的是 fallback 内容的触发时机：<slot name="aside">侧边栏默认内容</slot> 只有在**完全没有**带 slot="aside" 的节点时才显示。哪怕有一个节点但它是空的（<div slot="aside"></div>），fallback 也不会出现——它只看“有没有匹配节点”，不看节点有没有内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
