后备内容仅在无节点分发至slot时显示；具名插槽的后备内容仅当无对应name元素时显示，匿名插槽仅当无直系子节点或全被具名slot拦截时显示。
<slot></slot> 标签里的后备内容（fallback content）只在没有匹配内容投递进来时才显示，不是“默认渲染内容”，也不是“兜底占位符”。
后备内容什么时候不显示？
只要 Light DOM 中有节点被分发到这个 <slot></slot>，后备内容就完全不渲染——哪怕那个节点是空的 <div></div> 或仅含空白文本。
- 具名插槽（
<slot name="header">默认标题</slot>）只在外部没有带slot="header"的元素时才显示“默认标题” - 匿名插槽（
<slot>无内容时显示我</slot>）只在组件使用时内部**完全没有直系子节点**，或所有直系子节点都被其他具名插槽拦截后，才显示后备内容 -
<my-card></my-card>→ 后备内容显示；<my-card><span></span></my-card>→ 后备内容不显示（哪怕<span></span>是空的）
后备内容不能靠 CSS 控制显隐
后备内容不是独立 DOM 节点，它不会出现在最终的扁平化 DOM 中，也无法用 display: none 或 visibility: hidden 单独隐藏。它只是编译期的“备用文案”，一旦有内容投递，整个 <slot></slot> 元素的内容会被替换，后备文案彻底消失。
- 想实现“有条件显示默认内容”，得在 JS 中查
slot.assignedNodes({ flatten: true })是否为空，再手动插入或切换 - 不要试图给后备内容加 class 或事件监听器——它不会挂载到 DOM 树上
- 如果用了
<slot><img src="icon.svg"></slot>，图标只在无投递时出现；一旦有内容进来，<img>就被移除，不参与任何渲染流程
后备内容与样式隔离的关系
后备内容渲染在 Shadow DOM 内，所以它受 Shadow DOM 内部 <style></style> 控制，但**不继承 Light DOM 的样式**。不过要注意：如果后备内容里有内联样式或行内标签（如 <b></b>），它们会按 Shadow DOM 上下文解析。
- 后备文案中的
<span class="hint">提示</span>，其.hint类必须定义在 shadowRoot 的<style></style>里，否则无效 - 不能指望页面全局的
body { font-size: 14px }影响后备文字大小——除非用inherit或 CSS 自定义属性传递 - 避免在后备内容中写复杂结构；简单文本或单个图标最稳妥
<slot></slot> 的声明式限制，用 assignedNodes() + 手动 DOM 操作来补足。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
