css变量穿透shadow dom需宿主元素显式声明，否则var()解析失败；:host是唯一可靠注入入口，adoptedstylesheets不传递变量作用域，ios safari 16.4前存在继承bug。
CSS变量（自定义属性）能穿透Shadow DOM，但必须满足“继承链存在”和“宿主上已声明”两个硬条件；不是写了--color就能自动传进去，没声明就查不到，fallback也不会触发。
为什么var(--color)在Shadow DOM里有时是空的
根本原因不是浏览器不支持，而是变量没被继承过来。CSS变量本身是可继承属性，但它只沿DOM树向下传递——前提是宿主元素（即自定义元素标签本身）上明确设置了该变量。
- 如果
<my-button></my-button>标签上没写style="--color: red"或没在它的CSS规则里声明--color，那它内部shadowRoot里的var(--color)就解析为无效值，直接跳到var(--color, blue)的blue -
:root里定义的--color不会自动进Shadow DOM，因为:root不在宿主元素的继承链上 - 用
inherit或initial等关键字也无法绕过这个限制，变量继承只认“父元素是否声明了该名”
:host是唯一可靠的变量注入入口
想让变量进Shadow DOM，必须通过:host显式承接并转发。这是最可控、也最符合规范的做法。
- 在组件内部
<style></style>中写:host { --primary: #007bff; }，相当于把变量“挂”在宿主上，子元素自然能继承 - 外部可通过
my-button { --primary: #28a745; }动态改值，:host会实时响应，内部var(--primary)立刻更新 - 不要在
:host里写color: var(--primary)这种用途——那是样式应用，不是变量注入；变量注入只靠声明本身
避免用adoptedStyleSheets传变量的常见误解
adoptedStyleSheets能复用样式表，但不能“注入变量作用域”。它只是把一份CSSStyleSheet实例挂到多个shadowRoot上，变量仍要靠宿主继承。
- 下面这段代码不会让
--theme生效：sheet.replaceSync(`.inner { color: var(--theme); }`); root.adoptedStyleSheets = [sheet];—— 因为--theme没在my-button上声明 - 正确做法是：先确保
<my-button style="--theme: dark"></my-button>，再用adoptedStyleSheets加载含var(--theme)的规则 - 构建时若用PostCSS或Webpack处理变量，注意它们生成的是静态值，无法替代运行时继承机制
兼容性陷阱：iOS Safari 16.4之前不继承自定义属性
哪怕你把--color写在:host里，在iOS Safari 16.4以下版本中，Shadow DOM内部依然读不到它——这是引擎级bug，不是写法问题。
- 检测方式：
getComputedStyle(document.createElement('div')).getPropertyValue('--test')返回空字符串，不代表不支持，要结合window.CSS && CSS.supports('color', 'var(--x)')交叉判断 - 降级方案只能手动补：在
connectedCallback里读getComputedStyle(this).getPropertyValue('--color')，再用setAttribute或style.color写死到内部元素 - 别指望
!important或高特异性选择器解决变量继承失败，它们对变量解析阶段完全无效
真正难的不是怎么写var(--x)，而是确保--x从哪来、谁声明、何时可读——变量穿透不是开关，是一条从宿主DOM节点出发、经过CSS继承机制、最终落到shadowRoot内元素的确定路径。漏掉声明环节，后面全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
