无需登录 数据私有 本地保存

Shadow DOM 插槽演示 - slot 内容投影可视化

Web Components 开发工具 Shadow DOM slot 演示
10
0
0
0

🔍 Shadow DOM 插槽演示

可视化展示 Light DOM 内容如何投影到 Shadow DOM 的 <slot> 中

Web Components
📦 预设示例：
Light DOM 内容（被投影的内容） 放在宿主元素内的子节点
Shadow DOM 模板（定义 slot 结构） 包含 <slot> 的组件模板
👁️ 实时预览
0 个 Slot
🗺️ Slot 映射关系 悬停查看对应区域
编辑内容后将在此显示映射关系
❓ 常见问题与知识点

Shadow DOM 是 Web Components 的核心技术之一，它允许将隐藏的 DOM 树附加到常规 DOM 元素上。Shadow DOM 内部的结构、样式与外部文档隔离，不会受到外部 CSS 的影响。

<slot> 是 Shadow DOM 中的占位符，允许外部 Light DOM 内容"投影"进来。它就像组件的"插槽"，让组件使用者可以灵活地填充内容，同时保持组件内部结构的封装性。

类比：Shadow DOM 就像组件的"骨架"，slot 是骨架上的"接口"，Light DOM 则是填入接口的"内容"。

默认 Slot（匿名 Slot）：使用 <slot></slot> 定义，不需要 name 属性。它会自动接收 Light DOM 中所有没有指定 slot 属性的子节点。

命名 Slot：使用 <slot name="header"></slot> 定义。它只接收 Light DOM 中带有 slot="header" 属性的元素。

一个 Shadow DOM 中通常有一个默认 slot和多个命名 slot，它们协同工作实现灵活的内容分发。

当 Light DOM 中没有匹配的内容投影到某个 slot 时，该 slot 标签内的子节点会作为后备内容显示。

例如：<slot name="footer">默认底部信息</slot> —— 如果用户没有提供 slot="footer" 的内容，则显示"默认底部信息"。

这为组件提供了优雅的默认行为，用户可以选择覆盖或保持默认。

slot.assignedNodes() 返回所有投影到该 slot 的所有节点，包括文本节点、注释节点和元素节点。
slot.assignedElements() 只返回投影的元素节点（即 HTML 标签），过滤掉文本和注释。

在大多数 UI 场景中，assignedElements() 更常用，因为它只关注实际的 DOM 元素。两者都可以通过 { flatten: true } 选项来获取嵌套 slot 的最终投影结果。

1. 组件库开发：构建可复用的 UI 组件（按钮、卡片、弹窗等），样式隔离防止污染。
2. 微前端：隔离不同团队的代码，避免 CSS 冲突。
3. 浏览器扩展：注入的 UI 不会被页面样式影响。
4. 第三方 Widget：嵌入聊天窗口、支付表单等，保证样式独立。
5. 设计系统：确保组件在任何环境中都保持一致的视觉表现。

当 slot 的投影内容发生变化时（节点被添加、移除或重新分配），会触发 slotchange 事件。这个事件在 <slot> 元素本身上触发。

开发者可以监听这个事件来响应内容变化：
slot.addEventListener('slotchange', () => { /* 更新逻辑 */ });

注意：slotchange 不会冒泡，只能在 slot 元素上直接监听。

如果在 Shadow DOM 中定义了多个相同名称的 slot，Light DOM 中匹配的内容会被投影到第一个出现的同名 slot 中，后续的同名 slot 将显示为空（或显示其后备内容）。

因此，在同一个 Shadow DOM 中，建议确保每个 slot 名称唯一，以避免意外的内容分发行为。
🔧 相关工具