HTML中无法嵌套slot，因其仅在Shadow DOM内生效；实现嵌套需Web Components中每层自定义元素显式接管并分发内容，或用div+CSS模拟语义插槽。
HTML 本身没有原生“插槽（slot）嵌套”机制——<slot> 是 Web Components 规范中 <template> 和自定义元素（customElement）的特性，**只在 Shadow DOM 内生效**，不能直接用在普通 HTML 文档里模拟“多层插槽嵌套布局”。想实现类似效果，必须明确区分：是做 Web Components 组件化嵌套，还是仅用 HTML/CSS 模拟插槽语义？下面分场景说明。
为什么普通 HTML 中无法嵌套 <slot>
<slot> 不是通用布局标签，它只在自定义元素的 Shadow DOM 中被解析和分发。把 <slot> 写在普通 <div> 或顶层 HTML 里，浏览器会忽略它（或当作未知标签渲染为空白）。常见错误现象包括：
- 页面中写了多个
<slot name="header"></slot>，但内容没透传、不显示 - 父组件用了
<my-card><slot name="footer"></slot></my-card>，子组件里再写<slot name="action"></slot>，结果第二层 slot 完全不生效 - 误以为
<iframe>或<frameset>能承载 slot —— 实际上 iframe 是独立上下文，slot 无法跨边界分发
Web Components 中真正支持嵌套 slot 的写法
只有在自定义元素 + Shadow DOM + 显式 slot 分发逻辑下，才能实现多层 slot 嵌套。核心是：父组件的 <slot> 接收外部内容后，需手动将其作为“传递内容”再插入子组件的 slot 中（不能自动穿透）。
示例：一个可嵌套的 <card> 组件内含 <card-body> 子组件，且希望外部能同时指定 card 的 header 和 card-body 的 content：
立即学习“前端免费学习笔记（深入）”；
// card.js
class Card extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<slot name="header"></slot>
<card-body>
<slot name="body"></slot>
</card-body>
`;
}
}
// card-body.js（必须也定义为 customElement）
class CardBody extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<slot></slot>`;
}
}
使用时必须确保两层都注册为 customElement，且 <card-body> 的 slot 才能接收来自 <card> 内部 <slot name="body"> 的内容。否则，第二层 slot 就是空的。
不用 Web Components 时，如何模拟插槽嵌套语义？
如果只是想组织 HTML 结构、支持“区域占位+内容注入”，推荐用 <div> + CSS Grid/Flex + class 命名约定，而非硬套 slot 标签：
- 用语义类名替代 slot 名，例如
<div class="layout-header"></div>、<div class="layout-main"></div> - 嵌套容器显式设
display: flex或display: grid，每层独立控制流向（flex-direction 不继承） - 若需动态加载内容，用
fetch()加载 HTML 片段后注入对应class容器，而非依赖 slot 分发 - 避免在非 Shadow DOM 环境中写
<slot>—— 它不会报错，但等于没写
真正容易被忽略的是：slot 的嵌套不是“写两层 <slot> 就自动连通”，而是需要每一层 customElement 主动接管、再分发。哪怕只差一层未注册或未 attachShadow，整个链路就断了。别被 DevTools 里看似正常的标签结构误导——得看 slot 的 assignedNodes() 是否有内容。
