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 = `
<style>
h2 { color: #2c3e50; margin: 0; }
.content { font-size: 14px; }
</style>
<h2>用户卡片</h2>
<div class="content"><slot></slot></div>
`;
这段 <style> 只作用于 shadow 内部的 h2 和 .content，不会影响页面其他地方的同名标签或类名。
立即学习“Java免费学习笔记（深入）”；
样式封装的三种关键方式
-
天然隔离：普通 CSS 选择器（如
.btn、div p）在 shadow root 外写，不会匹配 shadow 内元素；反过来，shadow 内的样式也不会影响 light DOM。 -
::slotted() 有限穿透：只能用于选择被
<slot>投影进来的外部节点，且仅支持简单选择器（不能带后代/子代组合器），例如::slotted(.title)可以给传入 slot 的<h3 class="title">加样式，但::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拿到并操作内部节点（所以逻辑封装要靠自觉，样式封装才靠机制）。
基本上就这些。Shadow DOM 的样式封装不依赖构建工具或 BEM 命名，是浏览器级保障，适合构建高复用、低冲突的 UI 组件。
