javascript的shadow dom是什么_它如何封装样式？

狼影 2025-12-14 00:00:00 次阅读

Shadow DOM 是浏览器原生的 DOM 封装机制，通过 attachShadow 创建独立子树实现样式局部化与 DOM 隔离；支持天然隔离、::slotted() 穿透和 :host 控制，继承属性与全局样式仍可透入，open 模式下 JS 可访问但样式封装由浏览器保障。

Shadow DOM 是浏览器原生支持的一种 DOM 封装机制，它让组件的结构、样式和行为与主文档（light DOM）相互隔离，实现真正意义上的“样式局部化”和“DOM 隔离”。它不是 JavaScript 的语法特性，而是 Web Components 规范的一部分，通过 JavaScript API 创建和操作。

Shadow DOM 的核心：独立的 DOM 子树

调用 element.attachShadow({ mode: 'open' }) 后，该元素就拥有了一个 shadow root，它是一个独立的 DOM 根节点。所有追加到 shadow root 中的 HTML 结构（比如 div、style、slot）都只在这个子树内生效，外部 CSS 选中器默认无法穿透进来，内部样式也不会泄露出去。

例如：

const host = document.querySelector('#my-card');
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = `
  
  用户卡片
  
`;

这段只作用于 shadow 内部的 h2 和 .content，不会影响页面其他地方的同名标签或类名。

样式封装的三种关键方式

天然隔离：普通 CSS 选择器（如 .btn、div p）在 shadow root 外写，不会匹配 shadow 内元素；反过来，shadow 内的样式也不会影响 light DOM。
::slotted() 有限穿透：只能用于选择被投影进来的外部节点，且仅支持简单选择器（不能带后代/子代组合器），例如 ::slotted(.title) 可以给传入 slot 的加样式，但 ::slotted(div .title) 无效。
:host 和 :host-context 提供宿主控制：:host 匹配 shadow 宿主元素自身（即调用 attachShadow 的那个元素），:host(.active) 表示只有宿主有 active 类时才生效；:host-context(body.dark) 则可响应外部上下文（如整个页面切暗色主题）。

注意边界：哪些情况会打破封装？

封装不是绝对的“铁壁”：

CSS 继承属性仍会透入：比如 color、font-family、line-height 等可继承属性，若 shadow 内没显式设置，会从宿主元素继承 —— 这是设计使然，方便主题统一。
全局样式（如 @font-face、@keyframes）依然有效：它们作用于整个 document，shadow 内可直接使用定义好的字体或动画名。
JavaScript 仍可跨边界访问：如果 shadow root 是 open 模式，外部可通过 host.shadowRoot 拿到并操作内部节点（所以逻辑封装要靠自觉，样式封装才靠机制）。