是 Shadow DOM 内容分发的原生机制，作为占位符决定 light DOM 中哪些节点被投影到 shadow root 中；它不渲染自身，匹配依赖 name 属性和默认行为，且分发是响应式的。

什么是 ，它在 Shadow DOM 里起什么作用

不是自定义标签，也不是 Web Components 的“插件”，它是 Shadow DOM 内容分发（content distribution）的原生机制。没有它，外部传入的 HTML 节点就卡在 light DOM 里，根本进不了 shadow root——你写的 shadowRoot.innerHTML = '...' 再漂亮，也盖不住用户实际放进去的内容。

关键点在于： 是一个占位符，它不渲染自身，只决定 light DOM 中哪些节点被“投影”（projected）进来。浏览器在构建渲染树时，会把匹配的外部内容“挪”到 slot 的位置，而不是复制或移动 DOM 节点本身。

如何正确声明 slot 并让外部内容命中它

最常见错误是以为写个 就万事大吉。其实 slot 匹配靠的是 name 属性和默认行为：

• 无 name 的 是“默认插槽”，只接收那些没被其他具名 slot 拦截的顶层子节点（注意：不是所有后代，仅直接子节点）
• 带 name="header" 的 只匹配外部写了 slot="header" 的元素，比如

  标题

• 如果外部有节点带 slot 属性但没对应 ，该节点会被丢弃（不渲染），不会 fallback 到默认 slot
• 多个同名 是允许的，但内容只会被第一个匹配的 slot 接收（后续 slot 显示为空）

示例：组件模板中写

，则外部必须用

我的标题

正文内容

才能正确分发。

在自定义元素中使用 attachShadow() 后怎么插入 slot

slot 必须写在 shadow root 内部，不能靠 JS 动态 append 进去——因为 slot 是编译期语义，不是运行时 DOM 节点。常见误操作是：

AI Surge Cloud

AI Surge Cloud是一款面向企业数据科学和 ModelOps 的无代码决策智能平台。

下载

• 在 connectedCallback 里用 shadowRoot.appendChild(document.createElement('slot')) → 无效，slot 元素不会起作用
• 用 innerHTML 插入字符串含 → 可以，但要注意 HTML 解析上下文（比如 script 标签不会执行）
• 推荐做法：在 constructor 或 connectedCallback 中调用 this.attachShadow({mode: 'open'})，然后直接用 shadowRoot.innerHTML = ``

注意：innerHTML 方式对 slot 安全，但若需绑定事件或动态控制 slot 内容，应改用 document.createElement('slot') + shadowRoot.append()，只要确保是在 attachShadow 之后、且 slot 是直接 append 到 shadowRoot 或其子元素下即可。

为什么 slot 内容看起来“没更新”或“错位”，常见陷阱有哪些

slot 本身不触发重渲染，但它背后的 content 分发是响应式的——问题往往出在时机和结构上：

• 在 connectedCallback 之前访问 shadowRoot.querySelector('slot').assignedNodes() 会返回空数组，因为此时 light DOM 子节点还没完成分发
• assignedNodes({flatten: true}) 能看到最终投影结果，但别在每次 render 里反复调用，它开销不小
• slot 不支持 CSS 选择器穿透：你在 shadow 内写的 slot::slotted(p) 可以样式化被投影的
  ，但 slot::slotted(.foo > span) 无效（不支持后代选择器）
• 若组件用了 mode: 'closed'，外部无法通过 element.shadowRoot 访问 slot 状态，调试困难，建议开发期用 'open'

真正容易被忽略的是：slot 分发发生在浏览器布局前，但如果你在 requestAnimationFrame 里才读取 assignedNodes()，可能拿到的是旧快照——除非你明确监听 slotchange 事件。