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