CSS变量在Shadow DOM中读不到，是因为变量必须显式声明在宿主元素上才能进入继承链；:root、body或父容器声明均无效，因Shadow DOM继承起点是宿主元素而非<html>，且iOS Safari 16.4前存在引擎级兼容问题。
CSS变量在Shadow DOM里读不到，不是浏览器不支持，而是你没把它“挂”到宿主元素上——:root、body、父容器的style都无效，只有宿主自身声明了，内部var(--x)才能继承到。
为什么:root { --color: red }在Shadow DOM里完全失效
因为:root只匹配文档根节点（<html>），而Shadow DOM的继承起点是宿主元素（比如<my-button>），<html>根本不在它的祖先链上。DevTools里点开宿主元素 → “Show inherited CSS properties”，你会看到--color压根没列出来。
-
:root声明对所有Shadow DOM静默无效，连警告都不报 - 小程序（如微信）中
:root甚至不被WXSS解析器识别，必须用page或body前缀 - React/Vue项目若把主题CSS注入
document.head，同样穿不进Shadow DOM
正确做法：在宿主元素上显式声明变量
变量必须落在宿主标签自身，才能进入继承链。有三种等效方式，按使用场景选：
- 行内
style：<my-card style="--card-bg: #f8f9fa; --border-radius: 8px;"> - CSS规则绑定宿主：
my-card[theme="dark"] { --card-bg: #1e1e1e; --shadow: 0 2px 8px rgba(0,0,0,0.2); } - JS动态设置：
el.style.setProperty('--card-bg', '#f0f0f0')（常用于主题切换）
注意：这些声明必须作用于宿主元素本身，写成.wrapper > my-card { --card-bg: ... }是无效的——变量没挂到my-card上，继承链就断了。
立即学习“前端免费学习笔记（深入）”；
:host里怎么安全转发和使用变量
宿主声明只是“入口”，真正让变量在Shadow DOM里生效，得靠:host在内部
- 在组件内部
<style>中写：:host { --card-bg: var(--card-bg); }——这句看似冗余，实则确保变量名一致且可被子元素继承 - 避免循环引用：别写
:host { --card-bg: var(--card-bg, #fff); }，fallback会触发无限递归 - 禁止在
:host上用all: initial或all: unset，它会强制重置所有--*为invalid，var()直接回退fallback - 调试时看Computed面板：如果
var(--card-bg)显示invalid而非值或fallback，基本就是all: initial或拼错变量名导致的
容易被忽略的兼容性与细节
iOS Safari 16.4之前存在引擎级bug：哪怕:host里写了--color，Shadow DOM内部仍读不到。这不是写法问题，是必须加UA检测或降级处理的硬限制。
- 第三方库（如Lit）的
css模板本质是把变量值内联进样式表，属于“复制”而非“穿透”，不能替代宿主声明 -
::part()和exportparts可配合变量做细粒度控制，但前提是基础变量已在宿主上声明 - 所有
var(--x, fallback)里的fallback都要写，否则未定义时样式可能崩塌（比如color: var(--text-primary)没fallback，就变成inherit或透明）
真正卡住人的从来不是语法，而是“变量到底挂在哪一级”这个继承链位置——宿主元素是唯一可信的锚点，其余全是幻觉。
