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 = 'Hello' - 该内部结构在开发者工具中会显示为
#shadow-root，视觉上与普通 DOM 分开
实现样式的天然隔离
Shadow DOM 内部定义的 CSS 默认不会泄漏到外部，外部样式也默认无法穿透进来——这是它区别于普通 虽然默认隔离，但 Shadow DOM 提供了可控的方式让外部参与样式定制，兼顾封装性与灵活性。 立即学习“Java免费学习笔记（深入）”； Shadow DOM 很少单独使用，它和
.inner { color: red; }，只作用于 shadow 内部的 .inner，不影响页面其他同名类div { margin: 0; } 不会应用到 shadow 内的 :host 或 ::slotted 等特殊伪类主动接收
:host 选择器用于给 shadow host 元素本身设样式（例如自定义标签 :host([disabled])
支持有限的样式透传与定制
::slotted(selector) 可以给通过 --my-color）天然穿透 shadow 边界，常用于主题色等配置，组件内用 var(--my-color) 接收/deep/ 或 ::ng-deep（已废弃），现代方案应依赖自定义属性或明确的 slot + ::slotted 组合与 Custom Elements 协同构建可复用组件
customElements.define() 配合，才能发挥完整价值：一个自定义标签（如
.button 类也不会冲突
