Slot默认内容不显示是因为父组件哪怕传入换行符或空格等空白节点，也会被Vue视为已分配内容而跳过默认渲染；必须用assignedNodes()确认是否真为空数组，且具名插槽name需字面量严格匹配。
slot 默认内容不显示？先确认是否真“没传内容”
浏览器对 <slot> 的默认内容触发条件极其严格：只有当 assignedNodes() 返回空数组时才渲染。哪怕父组件写成 <my-comp>\n</my-comp>（一个换行符），assignedNodes() 也会返回 [Text]，默认内容直接跳过。
验证方式必须用 JS 实时查，不能靠肉眼判断页面是否空白：
- 在自定义元素中执行
this.shadowRoot.querySelector('slot').assignedNodes()，看返回数组长度是否为 0 - 在 Vue 组件的
mounted钩子中，给<slot ref="s">加 ref，再调用this.$refs.s.assignedNodes() - Chrome DevTools 中右键 slot 元素 → “Break on” → “attribute modifications”，观察是否被动态修改影响匹配
具名 slot name 不匹配导致默认内容失效
具名插槽的 name 属性必须字面量全等匹配，大小写、空格、连字符全部敏感。例如子组件写 <slot name="header"></slot>，父组件必须用 <h1 slot="header">标题</h1> —— 写成 slot="Header" 或 slot=" header " 都不会分配成功，但也不会报错，结果就是 slot 空着，且默认内容仍不显示（因为未分配 ≠ 无节点；此时 assignedNodes() 为空，本该显示默认内容，但你可能误以为“有内容没匹配上”，其实根本没进 slot）。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Vue 中动态绑定
:name（如<slot :name="slotName"></slot>）不支持默认内容，必须用静态name="xxx" - uni-app 的 NVue 渲染模式下，所有
name属性会被忽略，具名 slot 彻底退化为匿名 slot - Shadow DOM 插入时机问题：若父节点在
connectedCallback后才 appendChild 子节点，需手动调用slot.assignedNodes()重查
Vue 中如何让“传了空内容”也走默认值
Vue 不会自动区分“没传”和“传了空 <template #icon></template>”。如果你需要业务上“内容为空时仍 fallback”，只能手动判断：
- 在
setup()中通过slots.icon?.()检查是否返回空 vnode（比如只含空白文本或注释） - 用
v-if包裹 slot，默认内容放在else分支：<slot v-if="hasIconContent"></slot><div v-else>默认图标</div> - 最简单粗暴的做法：父组件彻底省略该插槽调用，而不是显式写空
<template #icon></template>
注意：Vue 3 中 <slot>{{ title || '暂无标题' }}</slot> 是合法的，且响应式；但 Vue 2 中模板内插值在默认内容里不会更新。
为什么 shadow DOM 里写了 <slot> 却完全看不到任何内容
这不是默认内容失效的问题，而是 slot 根本没生效——最常见原因是漏了 attachShadow 或没把内容正确 append 到 shadowRoot。
检查步骤：
- 确认自定义元素已调用
this.attachShadow({ mode: 'open' }) - 确认子组件模板中确实存在
<slot></slot>（不是写在 light DOM 里） - 确认父组件传入的是直系子节点：slot 只接收父元素的 immediate children，嵌套一层 div 就会断开分发链
- 检查是否有 CSS 把 slot 内容隐藏了（比如
display: none或visibility: hidden），slot 本身不自带样式
真正卡住调试的，从来不是语法写错，而是把“看着空”当“真的空”——空格、换行、v-show、shadow DOM 分发时机、平台兼容性，每个都可能让默认内容彻底消失。
