未设置CSS自定义属性时返回到良好的默认值

我正在考虑使用CSS自定义属性作为web组件的主题化解决方案，但我不确定应用自定义属性的最佳方式，同时在自定义属性未指定的情况下保留良好的默认行为

示例：我创建了一个组件，其阴影树中包含一个

元素，并希望该组件的用户能够根据其应用程序品牌的需要对包含的按钮的前景和背景色进行主题化。此操作的DOM如下所示：

<my-element>
  #shadow-root
    <style>
    button {
      background-color: var(--my-element-background-color);
      color: var(--my-element-color);
    }
    </style>
    <button>
      ...
    </button>
</my-element>

这是不幸的。查找每个要通过自定义属性公开的属性的默认值是一件痛苦的事情

但更大的问题是，这迫使人们将用户代理样式编码到组件中。从几个层面看，这似乎很糟糕

浏览器的默认样式不同

虽然上面的颜色碰巧有标准名称，但这种方法无法处理像

填充

这样的属性，其中值没有名称，默认值因浏览器而异

即使对于具有一致默认值的属性，用户代理样式也可能在将来发生更改

我猜除了上述原因之外，可能还有其他原因不这么做

我想知道是否有必要编写一个CSS规则，使自定义属性仅在定义时应用，否则没有任何效果。我希望找到一个解决方案，它只依赖于当前发布的自定义属性，而不依赖于新的建议，例如。

您需要的是解决方案，它解析为UA默认值，而不是初始值。然后可以将其用作回退值

---

（我认为关键字还没有得到广泛的支持，但这正是我们为这个问题设计的解决方案。）

为什么不使用类？主题的使用者可以根据需要使用它。在页面外部定义的CSS类定义不会影响阴影DOM子树中的元素。感谢您指出

revert

。虽然看到大多数浏览器还没有实现这一功能令人难过，但很高兴知道至少标准在这里给出了答案。希望其他浏览器也能效仿WebKit的做法。

button {
  background-color: var(--my-element-background-color, buttonface);
  color: var(--my-element-color, buttontext);
}