根本原因是父组件声明性地使用了插槽（即使内容为空），导致框架跳过默认内容；assignedNodes() 非空即证明已提供内容，与视觉空白无关。
slot name属性没匹配到内容时，默认内容为什么不显示
根本原因不是“没匹配到”，而是父组件**声明性地用了该插槽**——哪怕只写了空的 <template v-slot:header></template> 或 <div slot="header"></div>，浏览器/框架就认为“已提供内容”，直接跳过 slot 内部写的默认内容。
这和你肉眼看到“页面空白”无关，assignedNodes() 返回非空数组就是铁证。常见误判场景包括：
- 父组件模板里多了一个换行或空格：
<my-comp>\n </my-comp>→ 文本节点存在 → 默认内容不渲染 - 用了
v-show隐藏插槽内容：DOM 节点仍在 →assignedNodes()非空 → fallback 失效 - Vue 中写了
<template #icon></template>：空 template 仍算“已传”，不会回退 - name 大小写不一致：
<slot name="Header"></slot>和<h1 slot="header"></h1>完全不匹配，但内容也不会进默认插槽（除非没定义默认 slot）
怎么让具名插槽真正回退到默认内容
不能依赖“父组件不写”，得靠子组件主动判断是否真有有效内容。Vue 3 Composition API 下最稳妥的做法是结合 slots 对象和 vnode 判断：
- 在
setup()中用slots.icon?.()获取渲染函数，再检查返回 vnode 是否为空或仅含注释/空白文本节点 - 避免直接用
slots.icon的真假值——它永远是函数，即使没传也存在 - 更轻量的方案：给
<slot name="icon">加ref，在onMounted里调用ref.value.assignedNodes({ flatten: true })，长度为 0 才显示 fallback - 纯 HTML 自定义元素中，必须用
this.shadowRoot.querySelector('slot[name="icon"]').assignedNodes().length === 0做判断，再手动切换 DOM 状态
::slotted() 为什么样式不到 slot 里的默认内容
::slotted() 只作用于被投射进来的 Light DOM 节点，slot 标签内部写的默认内容（fallback）不属于投射内容，完全不受影响。
立即学习“前端免费学习笔记（深入）”；
比如这个写法无效：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<slot name="icon"><svg><path d=""></svg></slot>
即使你写了 ::slotted(svg) { width: 16px; }，里面的 <svg> 也不会被选中。真正生效的只有父组件传进来的、带 slot="icon" 的 <svg>。
要样式化默认内容，只能直接写普通 CSS 选择器，比如：
my-component ::slotted(svg) { /* 作用于投射进来的 svg */ }
my-component slot[name="icon"] svg { /* 作用于 slot 内部的 fallback svg */ }name 属性写错或动态绑定导致默认内容失效
name 必须是静态字面量，大小写、连字符、空格全敏感，且不支持绑定：
-
<slot :name="headerName"></slot>❌ 实际生成的是<slot name="headerName"></slot>，不是变量值 -
<slot name="Header"></slot>和<h1 slot="header"></h1>❌ 不匹配，内容会被丢弃（除非有默认 slot） -
<slot name="user-avatar"><img src="default.jpg"></slot>✅ 正确，name 字符串完全一致
动态切换插槽名的正确姿势是预设多个固定 name 的 slot，用 v-if 控制显隐，而不是试图绑定 name 属性。
真正卡住的从来不是语法写错，而是把“DOM 看着空”当成“assignedNodes() 为空”——空格、换行、v-show、shadow DOM 分发时机、平台兼容性（比如 uni-app NVue 模式下直接忽略 name），每个都可能让默认内容彻底消失。
