深入JavaScript_Shadow DOM API

Shadow DOM 是 Web Components 的核心技术，提供独立的 DOM 树和样式隔离。通过 attachShadow() 方法绑定到宿主元素，支持 'open' 或 'closed' 模式，实现封装性。常与自定义元素结合使用，构建可复用组件。其内部样式不泄露、外部样式不侵入，确保模块化。利用 <slot> 可实现内容分发，支持默认内容与命名插槽，提升灵活性。事件在 Shadow DOM 内触发会冒泡至外层，但 event.target 被重定向为宿主元素以维护封装，原始路径可通过 e.composedPath() 获取。仅当 composed 为 true 时，自定义事件才能跨越 Shadow Boundary。掌握 Shadow DOM 有助于减少样式冲突、提升组件复用性与项目可维护性，是跨框架开发的有力工具。

Shadow DOM 是 Web Components 技术的核心之一，它为开发者提供了一种将封装的 DOM 树附加到元素上的方式，同时隔离样式和结构。在 JavaScript 中操作 Shadow DOM API 可以实现高度模块化、可复用的组件设计，尤其适用于构建复杂前端应用。

什么是 Shadow DOM

Shadow DOM 允许你在一个普通 DOM 元素内部创建一个独立的“影子”DOM 树。这个影子树与主文档的 DOM 隔离，拥有自己的样式作用域和节点结构，不会受到外部 CSS 的影响，也不会轻易被 JavaScript 干扰。

每个 shadow root 都绑定到一个宿主元素（host），通过 attachShadow() 方法创建：

mode 为 'open' 时，可以通过 JavaScript 从外部访问 shadow root；'closed' 则不可访问，增强了封装性。

立即学习“Java免费学习笔记（深入）”；

创建并使用 Shadow DOM

实际开发中，通常结合自定义元素（Custom Elements）一起使用 Shadow DOM。以下是一个简单示例：

在 HTML 中使用：

页面上会显示蓝色文字，且其样式不会泄露到外部，外部样式也不会覆盖它。

样式隔离与插槽（Slots）机制

Shadow DOM 最大的优势是样式隔离。内部定义的 CSS 不会影响外部，外部也无法直接修改内部结构。但有时需要让外部传入内容并渲染在 shadow tree 内部，这就用到 <slot> 元素。

例如支持模板插入：

然后在 HTML 中：

slot 机制实现了内容分发（content distribution），使组件更灵活，类似 React 的 children 概念，但在原生 DOM 层实现。

事件在 Shadow DOM 中的行为

事件可以从 Shadow DOM 内部触发并冒泡到外层，但其目标（event.target）会被重定向，以维持封装性。这种行为称为“事件重定向”。

比如在 shadow 内点击按钮：

若需访问原始事件目标，可用 e.composedPath() 获取事件路径：

注意：只有设置为 composed: true 的自定义事件才能穿越 Shadow DOM 边界向外传播。

基本上就这些。掌握 Shadow DOM API 能帮助你写出真正封装良好的组件，减少样式冲突，提升项目可维护性。虽然现代框架如 React、Vue 有自己的抽象模型，但在需要极致性能或跨框架复用时，原生 Shadow DOM 仍是强大工具。

以上就是深入JavaScript_Shadow DOM API的详细内容，更多请关注php中文网其它相关文章！