Shadow DOM 是 Web Components 规范中的主要能力之一。它允许开发者把一棵独立的 DOM 子树挂载到某个普通 DOM 元素上，并让这棵子树在结构、样式和部分事件行为上与外部页面形成隔离。

从简单理解来看，Shadow DOM 就像给一个元素创建了一个“内部小世界”。 外部页面能看到这个宿主元素，但不直接看到它内部的真实结构； 内部样式默认不会污染外部，外部样式也不容易影响内部。

flowchart TD
A --> B
B --> C
C --> D
C --> E
C --> F

Shadow DOM 常用于：

• Web Components 自定义组件
• 浏览器原生控件内部实现
• 微前端样式隔离
• 第三方组件嵌入
• 浏览器插件或 SDK 挂件
• 低侵入式页面提高能力

二、为什么需要 Shadow DOM

传统前端页面中。所有元素都在同一棵 DOM 树中，CSS 也是全局级联的。这会带来几个典型问题，

. 样式容易互相污染

业务页面可能有如下全局样式：

button {
从border来看，none;background: red;}

如果第三方组件或组件库内部也使用 button样式可能被意外覆盖。

. DOM 结构缺少封装

组件内部结构暴露在外部页面中。外部脚本可以随意查询、修改、删除内部节点，导致组件行为不稳定。

. 组件复用成本高

如果组件依赖大量命名约定、CSS Modules、BEM 或建立工具隔离样式，就很难做到真正跨框架复用。

. 第三方嵌入风险高

广告、客服浮窗、埋点面板、浏览器插件等代码经常被嵌入各种不可控页面。如果没有隔离机制，很容易受到宿主页面样式影响。

flowchart TD
A --> B
B --> C
B --> D
B --> E
C --> F
D --> F
E --> F

Shadow DOM 的主要价值就是提供浏览器原生级别的封装边界。

三、Shadow DOM 的主要概念

. Host 宿主元素

Host 是挂载 Shadow DOM 的普通 DOM 元素。按理说，

. Shadow Root 影子根

Shadow Root 是 Shadow Tree 的根节点,由 attachShadow创建。

 const host = document.querySelector;const shadowRoot = host.attachShadow;

. Shadow Tree影子树