具名插槽匹配失败导致内容“消失”但无报错，主因是name属性字符串级精确匹配失败，如大小写、空格、连字符不一致；同名插槽仅渲染第一个；原生Web Components不支持动态slot值；fallback仅在无任何匹配节点时生效。
具名插槽匹配失败的常见现象
内容“消失”但控制台无报错，是最典型的信号。比如你在子组件写了
，父组件用了
，结果 header 区域一片空白——问题就出在大小写不一致。
≠
，连一个字母都不能差。同理，
（末尾空格）或
也完全不匹配。
name属性必须严格一致：大小写、连字符、空格全算数
匹配是字符串级精确比对，不是模糊查找。以下全部无效：
不接收
不接收
不接收
（开头空格）
Web Components 和 Vue 的
都遵循这一规则，没有例外。
多个同名插槽节点只分发第一个
如果你写了两个
和
，只有 A 会出现在
位置，B 被忽略。这不是 bug，是规范行为。需要多实例时，应改用作用域插槽或循环渲染，而不是堆叠同名
属性节点。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
动态 slot 名在原生 Web Components 中不支持
原生
的
属性值必须是静态字符串，不能是 JS 表达式或绑定。下面这行在纯 HTML/JS 自定义元素中会失效：
（Vue 语法）或
（模板引擎写法）。真要动态，得用 JS 手动切换
，或者换用框架的响应式插槽机制。
最容易被忽略的是 fallback 内容的触发时机：
只有在**完全没有**带
的节点时才显示。哪怕有一个节点但它是空的（
），fallback 也不会出现——它只看“有没有匹配节点”，不看节点有没有内容。
标题
Headerheaderslot="header ">slot="header-2"©2024
...... v-slotA
B
slotslot内容
内容
element.setAttribute('slot', name)侧边栏默认内容 slot="aside"