slot是Web Components中唯一原生支持内容分发的机制，必须在Shadow DOM内通过attachShadow创建并配对name属性才能生效，未匹配内容会被丢弃。

slot标签在web组件的作用_html插槽分发内容演示

slot 标签是 Web Components 中唯一原生支持内容分发（content distribution）的机制，它不依赖框架、不运行在 JavaScript 层，而是由浏览器 DOM 引擎直接解析和投射。如果你正在用 attachShadow 构建自定义元素，却发现子元素没渲染进去——大概率是漏了 slot 或没配对好 slot 的 name 属性。

默认插槽为什么没显示子节点？

Shadow DOM 默认隔离外部内容，slot 是唯一“开口”。没有，父元素传入的任何子节点都会被丢弃（不报错，但不可见）。

必须在 shadowRoot 内部显式写一个，才能接收所有未带 slot 属性的子节点
多个无名会按顺序接收内容：第一个接收前几个子节点，第二个接后续——但实际中几乎不用，容易混乱
如果组件模板里写了 默认文案，当外部没传内容时，就显示“默认文案”；但注意：只要外部有任意子节点（哪怕只是空格文本节点），默认文案就会被完全替换

具名插槽 name 不匹配的典型表现

常见错误是和

`标题`

看似对得上，但页面仍空白——原因往往出在大小写、空格或 Shadow DOM 插入时机。

name 值严格区分大小写：slot="Header" ≠
父元素子节点必须在 customElements.define 之后、且该自定义元素已插入 DOM 才能被正确投射；动态添加子节点需手动调用 element.assignedSlot 检查是否绑定成功
不要在 slot 标签内嵌套其他 slot，浏览器不支持嵌套插槽投射

如何调试 slot 内容是否被正确分发？

不能靠肉眼检查 DOM 结构——Shadow DOM 里的 slot 节点本身不渲染内容，真正显示的是其 assignedNodes() 返回的节点集合。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

在 DevTools 中选中自定义元素 → 切到 “Elements” 面板 → 展开 #shadow-root → 找到 → 右键 “Break on” → “attribute modifications”，可捕获投射变化
运行 document.querySelector('my-card').shadowRoot.querySelector('slot').assignedNodes()，返回空数组说明没内容投射进来
用 console.dir(slotElement) 查看 assignedElements 和 assignedNodes，确认节点类型（Text 节点常被忽略，但它也算内容）