shadow dom中body的color不生效，因继承链止于宿主元素；正确做法是在宿主上设css变量并配合inherit或var()使用，且变量必须挂载在宿主或其直系祖先上。
Shadow DOM里为什么body设的color不生效
因为body不是宿主元素，它的color根本进不了 Shadow DOM 的继承链。浏览器只沿 DOM 树向上查到宿主元素（比如<my-button></my-button>）为止，再往上就断了。哪怕你写body { color: white; }，Shadow 内部的<p></p>也不会变白——除非你在<my-button></my-button>上显式设style="color: white"。
更麻烦的是，用户代理样式会悄悄覆盖继承值：<a></a>默认蓝色、<h1></h1>默认加粗大号字体，这些 UA 规则优先级高于继承来的color或font-family。所以光靠“外部设 body”完全不可靠。
- 正确做法：在宿主元素上设
style="--text-color: white;"，内部用color: var(--text-color, #333); - 补救措施：对关键元素单独重置，比如
a { color: inherit; }，否则它永远按 UA 蓝色渲染 - 别碰
::slotted(*)来统一控制文字颜色——它只对插槽顶层节点有效，且不支持margin等布局属性
var(--x)能穿透Shadow DOM的真正条件
不是“变量自动穿透”，而是浏览器在计算var(--x)时，会从当前元素出发，沿 DOM 树一直向上找定义，这个过程天然跨过 Shadow Boundary。但前提是：变量必须挂在宿主元素自身，或它的直系祖先（比如<my-card theme="dark"></my-card>），不能挂在<div class="wrapper">这种中间容器上。<ul>
<li>✅ 有效：<code><my-card theme="dark"></my-card> + my-card[theme="dark"] { --bg: #1e1e1e; }
<div class="theme-dark"><my-card></my-card></div> + .theme-dark { --bg: red; }（变量没挂到 host，继承链在此中断）element.style.setProperty('--bg', '#2d2d2d')才管用，document.body.style.setProperty没用var()都必须带 fallback，比如background: var(--bg, #fff);，否则变量未定义时会直接回退到初始值，可能崩样式
:host和inherit配合时最容易翻车的点
:host只控制宿主元素自己，不自动影响子节点；inherit是子节点主动去拉取值——两者必须配对用，缺一不可。常见错误是只写:host { color: red; }，结果内部<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>还是黑的。
-
:host { color: red; }→ 宿主元素文本变红，但内部<p></p>仍用 UA 默认色 - 必须补一句：
p { color: inherit; }或:host > p { color: inherit; } - 想让圆角/边框也响应主题？得在
:host里直接用变量：:host { border-radius: var(--radius, 4px); } -
:host-context(.dark)可用于响应外部 class，但它只改宿主自身样式，内部子元素仍需显式继承或变量消费
用<style></style>注入样式时的硬性规范
别在字符串模板里拼<style></style>，比如shadowRoot.innerHTML = `<div></div>
<style>...</style>`——这样<style></style>会被当普通 HTML 解析，不进 CSSOM，后续 JS 修改规则（如sheet.cssRules[0].style.color）完全无效，还可能触发 FOUC。
- 正确姿势：用
document.createElement('style')+textContent+appendChild() - 复用公共样式？提前创建
CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [sheet]注入（注意 Safari 16.4+、Chrome 73+ 才稳定支持） - 绝对禁止在
<style></style>里写body、.app-container这类外部选择器——浏览器压根不解析它们，既不匹配也不报错，纯属浪费字节 - 如果组件要完全“白板化”，优先用
:host { color: inherit; font-family: inherit; line-height: inherit; }，而不是* { all: unset }（会清掉display导致布局崩溃）
实际项目中最容易被忽略的，是每次往 Shadow DOM 里新加一个原生 HTML 元素（比如<input>、<select></select>、<textarea></textarea>），都要单独检查它的 UA 默认样式是否干扰了设计意图——这些元素的默认边框、内边距、聚焦状态，全都不受外部全局 CSS 控制，只能靠:host + var() + inherit组合手动收编。
