Shadow DOM中文字颜色不是body所设，是因为虽color可继承，但用户代理样式（如a默认蓝色）优先覆盖；解决方法是在Shadow DOM内显式设置color: inherit或通过:host定义继承源。
Shadow DOM 内部不会自动继承外部的 font-family、color 等可继承属性，除非你显式写 color: inherit 或在 :host 上设值；但浏览器用户代理样式（如 a 的默认蓝色）会优先覆盖继承值，这是最常被忽略的根源。
为什么 Shadow DOM 里的文字颜色不是 body 设的？
因为 color 是可继承属性，理论上会从 body 传入，但实际渲染时，Shadow DOM 内部的 a、h1 等元素会被浏览器用户代理样式表（UA stylesheet）覆盖——比如 a 默认是蓝色，哪怕 body { color: white } 也无效。
-
color、font-family、line-height这类属性确实能“穿”过 Shadow Boundary，但仅限于未被 UA 样式或内部规则覆盖的情况 - Shadow DOM 内部没有
<style>时，a就按 UA 规则显示蓝色，不看外部color - 解决办法不是禁用 UA 样式（做不到），而是主动重置：
a { color: inherit; }
如何安全地重置 Shadow DOM 内部所有继承性样式？
不能靠全局 * { all: unset }——它会清掉 display、margin 等非继承属性，导致布局崩溃；也不能只写 all: initial，那会丢掉所有继承链。
- 推荐在 Shadow Root 的顶层
<style>中加：:host { color: inherit; font-family: inherit; line-height: inherit; } - 对特定元素单独处理：
a, h1, p { color: inherit; }，避免 UA 覆盖 - 别用
::slotted(*)做重置——它只作用于 slot 插槽内容，且不支持display等关键属性 - 如果组件需完全“白板化”，建议从
:host { all: revert-layer }（需 Chromium 115+）或手动列出关键继承属性
:host 和 inherit 怎么配合才不翻车？
:host 是唯一能从外部影响 Shadow DOM 样式的入口之一，但它只控制宿主元素自身，不直接作用于内部子节点。子节点要继承，还得靠 inherit 主动拉取。
立即学习“前端免费学习笔记（深入）”；
-
:host { color: red; }只让宿主元素变红；内部<p>仍可能显示 UA 默认色，除非你写p { color: inherit; } -
:host([disabled]) { opacity: 0.5; }有效，因为opacity不可继承，且作用于宿主本身 -
:host-context(.dark) { background: #1e1e1e; }可响应外部 class，但内部子元素背景仍需显式设或继承 - 别在
:host里写font-size: 16px然后指望所有子元素自动缩放——必须每个子选择器都配font-size: inherit
真正麻烦的不是继承不到，而是继承到了却被 UA 样式悄悄覆盖；每次加新元素（比如突然塞个 input 或 select），都要单独检查它的 UA 默认值是否干扰了你的设计意图。
