slot默认内容仅在父组件未向该slot提供任何节点（含空格、换行、注释等文本节点）时渲染；一旦存在任意dom节点（即使为空div或空白字符），即视为有内容，不触发fallback。
slot 标签默认内容在什么情况下会渲染
当父组件没有传入对应 slot 的内容，或者传入的是空节点（比如只有空白字符、注释、或 <!-- -->），浏览器才会回退到 slot 内的默认内容。注意：哪怕传入一个空的 <div></div>，也算“有内容”，默认内容就不会显示。
常见误判点是以为只要没写子元素就触发降级——其实 DOM 节点是否存在才是关键判断依据。
-
<my-card></my-card>→ 渲染 slot 默认内容 -
<my-card><div></div></my-card>→ 不渲染默认内容（哪怕div为空） -
<my-card></my-card>（含空格）→ 不渲染默认内容（文本节点非空）
如何让 slot 默认内容真正“降级”而非被意外覆盖
避免默认内容被父组件静默吞掉的关键，是用 JavaScript 主动检测 slot 是否有有效内容。纯 HTML 的 slot 无法感知内容是否“有意义”，必须结合 assignedNodes() 判断。
在自定义元素中，可这样检查：
const slot = this.shadowRoot.querySelector('slot');
const nodes = slot.assignedNodes({ flatten: true });
const hasContent = nodes.some(node => {
if (node.nodeType === Node.TEXT_NODE) return node.textContent.trim() !== '';
if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute('hidden') && node.offsetWidth > 0;
return false;
});
if (!hasContent) {
this.classList.add('fallback-active');
}
这个逻辑比单纯依赖 slot 回退更可靠，尤其适合需要视觉降级（如占位图替换成文字说明）的场景。
slot 默认内容与 CSS fallback 的配合要点
slot 默认内容本身不带样式隔离，默认会受外部 CSS 影响。如果组件期望降级后保持一致 UI，需在 shadow DOM 中显式重置或限定作用域。
- 用
:host(:not([has-content]))配合属性标记控制样式（推荐） - 避免在默认内容里直接写内联 style，改用 class + scoped CSS
- 若使用
<slot><p>加载中...</p></slot>，确保p的 margin/padding 在所有主题下都合理 - 注意 Safari 对
slot内文本节点的换行处理差异，必要时加white-space: nowrap
为什么 customElements.define 后 slot 降级有时失效
最常踩的坑是：自定义元素升级前，HTML 解析器已把 slot 默认内容当作普通子节点移走，导致升级后 slot.assignedNodes() 始终为空，但默认内容却不见了——它被提前“抽干”了。
解决方式只有两个：
- 确保组件定义在 HTML 解析前完成（如
<script></script>放或用defer） - 或改用
<template></template>+ 手动innerHTML注入，默认内容由 JS 控制，绕过解析阶段干扰
这个时机问题没有 warning，也查不到错误，只能靠 DOM 快照对比确认 slot 内容是否被提前清空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
