具名插槽匹配失败导致内容“消失”但无报错，主因是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 都遵循这一规则，没有例外。
多个同名插槽节点只分发第一个
如果你写了两个<h2 slot="title">A</h2>和<h2 slot="title">B</h2>，只有 A 会出现在<slot name="title"></slot>位置，B 被忽略。这不是 bug，是规范行为。需要多实例时，应改用作用域插槽或循环渲染，而不是堆叠同名 slot 属性节点。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
动态 slot 名在原生 Web Components 中不支持
原生 <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 也不会出现——它只看“有没有匹配节点”，不看节点有没有内容。
