Shadow DOM 样式无法影响外部元素，这是规范强制的隔离机制；:host 和 ::slotted 作用范围严格受限，所有“穿透”尝试均无效，真正可行的是通过属性或事件进行约定式通信。
Shadow DOM 里样式无法影响外部元素？别试了，根本做不到
Shadow DOM 的核心设计就是样式隔离——shadowRoot 内部的 CSS 默认完全不影响宿主（host）元素以外的任何外部节点，反过来也一样。这不是 bug，是 spec 强制行为。想靠 :host 或 ::slotted 修改父级或兄弟组件的样式？语法上就不存在。
哪些写法看似能“穿透”，实则无效或误用
常见误解包括：在 shadow 内写 body { color: red }、用 !important 覆盖外部样式、或者把 style 标签插到 document.head 里试图“污染全局”。这些要么被 Shadow DOM 的作用域拦截，要么违反封装原则，实际运行时毫无效果。
-
:host只能选中当前自定义元素自身，不能选中它的父容器或祖先 -
::slotted(*)只能作用于 slot 中传入的**顶层子节点**，且仅限于 slot 分发后的渲染位置，不改变原始 DOM 结构或外部样式 - 从
shadowRoot内执行document.querySelector('header')可能返回 null（如果header在 shadow 外），即使查到了，element.style.color = 'blue'也只是内联样式，和 shadow 样式穿透无关
真正可行的“影响外部”的方式只有两种
所有绕过样式隔离的方案，本质都是**主动暴露接口或约定通信时机**，而非 CSS 自动穿透。
- 通过属性控制：在自定义元素上设置
data-theme="dark"这类属性，让外部 CSS 利用[data-theme="dark"] .card做响应式适配 - 通过事件通知：在 shadow 内触发
new CustomEvent('theme-change', { detail: { mode: 'dark' } })，由外部监听并动态切换 class 或插入 style 标签 - 避免直接操作外部样式表：不要尝试用
document.styleSheets[0].insertRule注入规则，现代浏览器对跨 shadow 修改会限制，且难以维护
Chrome DevTools 里看到的“样式穿透”其实是假象
在 Elements 面板中展开 shadow root 后，有时能看到外部定义的 CSS 规则出现在 computed 样式里，比如 color: inherit 来自 body。这不代表样式“穿透”了，而是继承链自然生效（如 color、font 等可继承属性）。但一旦遇到 display、margin、background 这类非继承属性，继承就彻底中断。
立即学习“前端免费学习笔记（深入）”；
- 检查 computed 样式时，注意看来源是否标着
inherited from body—— 这只是继承，不是穿透 -
getComputedStyle(el)返回的结果反映的是最终渲染值，不等于规则可跨 shadow 生效 - Shadow DOM v1（
mode: "closed"）下，连shadowRoot对象都不可访问，更别提样式干预
