Shadow DOM 的样式穿透本质是浏览器禁止跨 boundary CSS 规则匹配，仅支持三种合法路径：CSS 变量继承（需设在宿主或其直系祖先并带 fallback）、::part() 显式暴露（需节点含 part 属性且兼容性受限）、::slotted() 控制插槽顶层可继承属性；:host 和 :host-context() 仅影响宿主自身，须配合 inherit 或变量才能传导至子元素。
Shadow DOM 的样式穿透不是“能不能做”的问题，而是“根本不能靠 CSS 规则直接穿透”的问题——浏览器明确禁止跨 boundary 的样式影响。所谓“穿透”，实际只有三种合法路径：CSS 自定义属性继承、::part() 显式暴露、或通过属性/事件约定通信。
CSS 变量（var()）是唯一真正跨 Shadow Boundary 的机制
它不靠选择器匹配，而靠浏览器在计算时沿 DOM 树向上查找变量定义，天然跨越 shadow boundary。但有两个硬条件：
- 变量必须设在宿主元素自身或其直系祖先上，比如
<my-button theme="dark"></my-button>+my-button[theme="dark"] { --bg: #1e1e1e; } -
var(--bg, #fff)必须带 fallback，否则未定义时会回退到属性初始值（如background-color: initial是transparent，不是白色） - 别指望
body { --bg: red; }生效——body不是宿主的祖先，继承链在宿主处就断了
::part() 是组件作者主动开放的样式接口，不是通用穿透方案
它只对 shadow 内部显式标记了 part 属性的节点有效，且 Firefox 至今未实现。常见误用：
- 写
my-input::part(label)却没在 shadow root 里给对应<span>加part="label" - 试图给
<slot>或 slot 分发进来的内容加part——不行，part只能写在 shadow 内真实节点上 - 用动态值，比如
part={this.labelPart}——part必须是静态字符串，JS 绑定无效
::slotted(*) 只能控制插槽内容的可继承属性
它看起来像穿透，实则受限极严：
立即学习“前端免费学习笔记（深入）”；
- 只对 slot 分发后的顶层子节点生效，嵌套子节点不匹配
- 仅支持
color、font-family、line-height、background-color等可继承属性 -
margin、padding、display、width全部无效，写了 DevTools 里也看不到声明被应用 - 它不改变原始 light DOM 结构，只是渲染时“贴”一层样式，无法干预布局边界
别碰 :host-context() 和 :host 做主题适配
它们只能影响宿主自身，不能自动传导到内部子元素：
-
:host(.dark) { color: white; }只让宿主文本变白，内部<p>还是默认黑 - 必须配对写
p { color: inherit; }或:host(.dark) p { color: var(--text-color, white); } -
:host-context(.theme-dark)依赖外部 class 存在，但 class 必须挂在宿主父级（不是任意 wrapper），否则查不到 - 这种写法耦合重，扩展性差；变量方案更松散、更易维护
最常被忽略的点：继承链在 Shadow boundary 处天然中断，inherit 不是万能钥匙——它只从父元素拿值，而父元素就是宿主，不是外部 body 或 .app。所有“穿透”效果，本质都是靠变量或接口约定，而非 CSS 自动越界。
