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

admin 百科 2025-12-14 12

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

javascript的shadow dom是什么_它如何封装样式？-第1张图片-佛山资讯网

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

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

调用 element.attachShadow({ mode: 'open' }) 后，该元素就拥有了一个 shadow root，它是一个独立的 DOM 根节点。所有追加到 shadow root 中的 HTML 结构（比如 p、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>
  <p class="content"><slot></slot></p>
`;

登录后复制

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

标签： css javascript java html js 浏览器工具