什么是Shadow DOM？它有什么作用？

什么是Shadow DOM？

Shadow DOM（影子DOM） 是Web Components技术栈的核心组成部分，用于实现Web组件的封装与隔离。它允许开发者在主文档的DOM树之外创建一个独立的、封闭的DOM子树（称为Shadow Tree），并通过Shadow Root（影子根节点）附加到宿主元素（Shadow Host）上[1][5][39]。这种机制使得组件的内部结构、样式和行为与外部文档完全隔离，形成一个独立的作用域。

关键特性：

1. 独立DOM结构：Shadow DOM中的元素不会暴露给外部文档，外部JavaScript无法直接操作其内部DOM。
2. 样式隔离：内部定义的CSS仅作用于Shadow DOM内部，外部样式也无法影响内部元素（除非通过特殊机制，如::part或::slotted伪类）。
3. 模式控制：通过attachShadow({ mode: 'open' | 'closed' })设置访问权限。开放模式允许通过shadowRoot属性访问内部DOM，封闭模式则完全禁止外部访问。
4. 组合性：支持通过 槽位（Slots） 将外部内容插入到Shadow DOM中，实现动态内容分发。

Shadow DOM的主要作用

1. 样式与行为的封装

• 避免全局样式污染：传统CSS选择器具有全局性，容易导致命名冲突。Shadow DOM通过作用域CSS实现样式隔离。例如，<video>标签内部的复杂UI由Sha