shadow dom 的核心作用是提供样式隔离和结构封装，通过独立 dom 树实现内外互不干扰，支持 open/closed 模式、内置样式隔离、:host/::slotted 选择器及 css 自定义属性透传，并与 custom elements 协同构建可复用组件。
Shadow DOM 的核心作用是为 Web 组件提供真正的**样式隔离**和**结构封装**，让组件内部的 HTML、CSS、JavaScript 不会意外影响外部页面，也不会被外部干扰。
实现 DOM 结构的独立封装
Shadow DOM 在一个元素（称为 shadow host）下创建一个独立的 DOM 树，这个树与主文档 DOM 是分离的。浏览器不会把 shadow tree 中的节点暴露给 document.querySelector 或常规遍历 API，外部 JS 无法直接访问其内部结构，除非显式开放接口（如通过 shadowRoot 或自定义方法）。
- 调用
element.attachShadow({ mode: 'open' })创建可访问的 shadow root；设为'closed'则连element.shadowRoot都返回null - 向 shadow root 中添加 HTML 片段或节点，例如：
shadowRoot.innerHTML = '<div class="inner">Hello</div>' - 该内部结构在开发者工具中会显示为
#shadow-root，视觉上与普通 DOM 分开
实现样式的天然隔离
Shadow DOM 内部定义的 CSS 默认不会泄漏到外部，外部样式也默认无法穿透进来——这是它区别于普通 <div> 嵌套的关键特性。
<ul>
<li>在 shadow root 中写 <code>.inner { color: red; }，只作用于 shadow 内部的 .inner，不影响页面其他同名类
div { margin: 0; } 不会应用到 shadow 内的 <div>，除非使用 <code>:host 或 ::slotted 等特殊伪类主动接收
:host 选择器用于给 shadow host 元素本身设样式（例如自定义标签 <my-button></my-button>），支持带条件的写法如 :host([disabled])
支持有限的样式透传与定制
虽然默认隔离，但 Shadow DOM 提供了可控的方式让外部参与样式定制，兼顾封装性与灵活性。
立即学习“Java免费学习笔记（深入）”；
-
::slotted(selector)可以给通过<slot></slot>投入的内容设置样式（注意：只能作用于 slot 的直接子元素，且样式规则必须写在 shadow 内） - CSS 自定义属性（
--my-color）天然穿透 shadow 边界，常用于主题色等配置，组件内用var(--my-color)接收 - 不推荐强行用
/deep/或::ng-deep（已废弃），现代方案应依赖自定义属性或明确的 slot + ::slotted 组合
与 Custom Elements 协同构建可复用组件
Shadow DOM 很少单独使用，它和 customElements.define() 配合，才能发挥完整价值：一个自定义标签（如 <date-picker></date-picker>）可以完全隐藏实现细节，对外只暴露属性、事件和 slot 插槽。
- 组件逻辑、模板、样式全部封装在 shadow root 中，升级或修改不影响使用它的页面
- 多个实例之间样式互不干扰，即使都用了
.button类也不会冲突 - 便于构建设计系统、微前端子组件、第三方 UI 库（如 Ionic、Shoelace 的底层基础）
