标签不能嵌套多层，仅在shadow dom中单层生效；浏览器只解析顶层，嵌套的被忽略；实现伪嵌套需每层自定义元素显式转发内容，而非自动穿透。
<slot></slot> 标签在普通 HTML 网页中**不能嵌套多层**，也不支持深度分发——它只在 Shadow DOM 内生效，且浏览器原生不解析嵌套的 <slot></slot>。
为什么直接写多个 <slot></slot> 不起作用
常见错误是把 <slot name="header"><slot name="icon"></slot></slot> 这类结构写在自定义元素的 shadowRoot 里，结果第二层 <slot></slot> 完全被忽略。原因很直接：
- 浏览器只识别顶层
<slot></slot>，内部嵌套的会被当作普通未知标签处理（渲染为空或报错） -
<slot></slot>的作用是“分发 light DOM 节点”，不是容器；它不递归解析子节点里的 slot - Shadow DOM 分发机制是单层投射：light DOM 中带
slot="xxx"的节点，只匹配 shadowRoot 中第一个同名<slot name="xxx"></slot>，不向下穿透
Web Components 中实现“伪嵌套”的唯一路径
想让外部内容最终出现在三层深的子组件里，必须靠**显式转发**，而不是依赖 slot 自动穿透。核心逻辑是：父组件接收内容 → 手动把它作为子组件的 light DOM 输入 → 子组件再用自己的 <slot></slot> 接收。
- 每层自定义元素都得调用
attachShadow()，并在 shadowRoot 中写自己的<slot></slot> - 父组件不能把内容“塞进”子组件的 slot 里，而要把它作为子组件的子节点插入：
childEl.appendChild(lightContent) - 子组件内部仍需定义
<slot name="xxx"></slot>，否则内容不会被投射出来 - 如果中间层组件没定义
<slot></slot>，那传入的内容就卡住了，不会自动往下掉
Vue 或 React 等框架里的“嵌套 slot”本质不同
框架中看到的多层插槽（比如 <card><header><button></button></header></card>）是**运行时模板编译的结果**，不是 HTML 原生 <slot></slot> 的行为：
- Vue 的
<slot></slot>是编译器指令，会被转成 render 函数，内容作用域、数据透传全靠 v-slot 显式绑定 - React 的 children 是 props，靠组件手动向下传递，和 DOM slot 机制无关
- 这些方案能“模拟”嵌套，但底层不依赖浏览器 slot，也不能直接复用于纯 Web Components 场景
真正容易被忽略的是：slot 分发发生在 DOM 构建阶段，而你看到的“嵌套效果”往往来自 JS 层的主动控制或框架抽象——原生 HTML 没有“深度 slot”这回事，强行套用只会卡在 assignedNodes() 返回空数组上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
