我的Web组件使用CSS变量。
这些变量需要默认值。
它们在许多文件中都使用过，所以我想提供一次默认值，一次仅提供一次。。
第一次尝试使文本变黑。为什么？
一次提供默认值的正确方法是什么？
.a {
--my-variable: red;
}
.b {
--my-variable: var(--my-variable,blue);
}<div class="a">
<div class="b">
<span style="color: var(--my-variable);">text</span>
</div>
</div>
在:root中声明默认值，然后在选择器中覆盖。
:root {
--primary-color: red;
}
* {
color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 0.25rem;
margin: 0;
}
div {
--primary-color: green;
}
p {
--primary-color: blue;
}<div>HI!</div>
…
<p>Bye!</p>,
第一次尝试使文本变黑。为什么？
因为此--my-variable: var(--my-variable,blue);是无效的，因为您试图用自身来表示相同的变量，这是不允许的，因此浏览器只会忽略它。然后，稍后使用color: var(--my-variable);时，颜色将退回到黑色的initial值。
正确的方法是简单地在较高级别上定义变量，它将被所有元素继承（例如@kornieff提供的解决方案）
几乎不对自定义属性进行评估，只是它们允许并评估var（）函数的值。 这可以创建循环依赖项，其中自定义属性使用var（）对其进行引用，或者两个或多个自定义属性分别尝试相互引用。
为每个元素创建一个有向依存关系图，其中包含每个自定义属性的节点。如果自定义属性prop的值包含引用属性var的var（）函数（包括在var（）的后备参数中），请在prop和var之间添加一条边。从自定义属性到自身边缘都是可能的。 如果依赖图中有一个循环，则循环中的所有自定义属性都必须计算为其初始值（这是保证无效的值）。