JavaScript的ShadowDOM是什么？如何封装样式？
2026-04-11 19:59:43
0浏览
收藏
Shadow DOM 是浏览器原生支持的 DOM 封装机制，作为 Web Components 的核心特性，它通过创建独立的 shadow root 实现真正的样式局部化与 DOM 隔离——外部 CSS 无法穿透影响内部元素，内部样式也不会泄露污染全局，同时借助 `::slotted()`、`:host` 和 `:host-context` 等伪类提供灵活的样式穿透与宿主控制；尽管继承属性和全局资源（如字体、动画）仍可透入、open 模式下 JS 可访问内部结构，但其样式封装由浏览器底层保障，无需依赖 BEM 或构建工具，是构建高复用、低冲突、主题友好型 UI 组件的理想基石。
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 = `
<style>
h2 { color: #2c3e50; margin: 0; }
.content { font-size: 14px; }
</style>
<h2>用户卡片</h2>
<div class="content"><slot></slot></div>
`;
这段
