CSS变量在Shadow DOM中不自动继承，需显式挂载到宿主元素上；常见错误是将变量定义在:root或body等非宿主元素上；正确方式包括行内style、宿主选择器CSS规则或JS setProperty；:host中转发需避免fallback递归和all: initial/unset；iOS Safari 16.4前存在WebKit兼容性缺陷。
因为CSS变量在Shadow DOM里不自动继承，必须显式挂载到宿主元素上才能被内部var()读取——这不是bug，是继承链被隔离的正常行为。
为什么var(--color)在Shadow DOM里显示invalid
常见错误是把变量写在:root、body或父容器上，比如body { --color: red; }。但Shadow DOM的继承起点是宿主元素（如<my-button>），<html>根本不在它的祖先链里。
- DevTools里右键宿主元素 → “Show inherited CSS properties”，如果看不到
--color，说明变量没挂上去 -
getComputedStyle(host).getPropertyValue('--color')返回空字符串，就确认宿主上没声明 - 拼错变量名（
--Color≠--color）、大小写不一致也会导致invalid
如何正确把变量“挂”到宿主上
只有三种等效方式，本质都是让变量落在宿主元素自身：
- 行内设置：
<my-card style="--card-bg: #f8f9fa;"> - CSS规则绑定宿主：
my-card[theme="dark"] { --card-bg: #1e1e1e; }（必须写在light DOM或全局CSS中） - JS动态设置：
el.style.setProperty('--card-bg', '#f0f0f0');
注意：.wrapper > my-card { --card-bg: ... }无效——变量没挂在my-card上，继承链就断了。
立即学习“前端免费学习笔记（深入）”；
:host里转发变量时的致命陷阱
:host是唯一能承接并向下透传变量的入口，但它本身不自动继承父级变量。你得主动写:host { --bg: var(--bg); }来“接住”外部值——但这句极易出错：
- 禁止写
:host { --bg: var(--bg, #fff); }：fallback会触发无限递归，Chrome/Firefox可能卡死 - 绝对不要在
:host或shadowRoot.documentElement上用all: initial或all: unset：它会把所有--*设为initial，var()直接回退fallback且不报错 -
:host规则必须写在shadow内部的<style>里，外部CSS文件里写my-button:host完全无效
iOS Safari 16.4之前的兼容性硬伤
哪怕写法完全正确，在iOS Safari 16.4之前的版本里，var(--x)仍可能返回undefined。这不是代码问题，是WebKit引擎缺陷——变量声明挂在宿主上，但内部读不到。
检测方式：getComputedStyle(document.createElement('div')).getPropertyValue('--test')返回空字符串，再结合window.CSS判断是否支持；若需兼容，得降级为JS设置element.style.color或用adoptedStyleSheets配合内联变量声明。
