掌握HTML Shadow DOM的插槽Slot机制：实现灵活的组件布局-html教程-PHP中文网

slot是web components中shadow dom专用的内容分发机制，仅在自定义元素调用attachshadow()创建影子根后生效，外部内容须为直系子节点且name严格匹配，否则不渲染也不报错。

掌握html shadow dom的插槽slot机制：实现灵活的组件布局

slot 不是模板占位符，也不是框架语法糖；它只在自定义元素的 Shadow DOM 里生效，且必须调用 attachShadow() 才能工作——没挂影子根，写一百个 <slot></slot> 都不会渲染。

为什么 `<slot></slot>` 完全没反应？

最常见原因是把 <slot></slot> 当普通 HTML 标签用了：直接写在页面里、塞进 <div> 中、或放在未注册的自定义标签内部。浏览器会忽略它，不报错也不警告。 <ul><li>必须用 <code>customElements.define() 注册合法自定义元素（如 <my-card></my-card>），不能对 <div> 或 <code><p></p> 调用 attachShadow()，否则抛出 DOMException: This element does not support shadow roots

attachShadow({ mode: 'open' }) 必须在 constructor 或 connectedCallback 中执行，且只能调用一次

Shadow DOM 内容需显式插入：用 shadowRoot.innerHTML = '...' 或 shadowRoot.appendChild(template.content.cloneNode(true))

内容“消失”了？检查直系子元素和 name 匹配

写了 <slot name="header"></slot>，外部也写了 <h2 slot="header">标题</h2>，但页面空白——大概率是层级或字符串不匹配。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

外部内容必须是自定义元素的**直系子元素**：<my-card><h2 slot="header">标题</h2></my-card> ✅；<my-card><div><h2 slot="header">标题</h2></div></my-card> ❌（<h2></h2> 是孙节点，不参与分发）
name 和 slot 属性值**严格区分大小写、完全相等**：<slot name="Header"></slot> 不匹配 <h2 slot="header"></h2>
多个同名 <slot name="item"></slot> 时，Light DOM 中每个 slot="item" 元素按顺序填入一个 slot，不是广播复制
没带 slot 属性的元素，只尝试匹配第一个无 name 的 <slot></slot>；后面再多空 <slot></slot> 也收不到

`assignedNodes()` 返回空？别急着查，先等 `slotchange`

在 connectedCallback 里立刻调 slot.assignedNodes()，大概率拿到空数组——因为此时内容还没完成分发。

监听 slotchange 事件才是可靠时机：slot.addEventListener('slotchange', () => { console.log(slot.assignedNodes({ flatten: true })); })
assignedNodes() 默认不展开嵌套结构，必须加 { flatten: true } 才能拿到所有最终投射进来的节点（包括 fallback 内容里的节点）
slotchange 不冒泡、不捕获，也不能用 addEventListener('slotchange', ...) 在 shadowRoot 上监听，必须绑定到具体 <slot></slot> 元素上
Firefox 63 以下不支持 slotchange，需降级用 MutationObserver 监听 slot 的 childList