没有设置CSS自定义属性时回退到良好的默认值

Question

我正在寻找使用CSS自定义属性作为Web组件的主题化解决方案，但我不确定应用自定义属性的最佳方式如果自定义属性未指定，则保留良好的默认行为。

示例：我创建了一个组件，其阴影树中包含一个<button>元素，并且要根据应用程序品牌的需要让组件主题的用户使用包含的按钮的前景和背景颜色。造成这种情况的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自定义属性，它是合理的，他们想到的是，按钮会显示其正常的默认外观，但上述CSS不足这一点。使用var()将覆盖浏览器的默认用户代理样式表，因此如果未指定自定义属性，则所有元素的颜色属性将恢复为其基础默认值，而不是button元素的默认值。所以按钮最后是background-color: transparent;对于color，默认值因浏览器而异。

那些通用的默认颜色是无益的;所需的是按钮的默认颜色值。可以手动查找并复制用户代理样式表中的默认值。在这种特殊情况下，默认值是最可能的是buttonface和buttontext。在这种情况下，可以将它们编码为自定义属性的默认值。

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

这是不幸的。查找您希望通过自定义属性公开的每个属性的默认值是一种痛苦。

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

1. 浏览器的默认样式不同。
2. 尽管上述颜色碰巧具有标准名称，但该方法无法处理像padding这样的属性，其中值没有名称，并且默认值因浏览器而异。
3. 即使对于具有一致默认值的属性，用户代理样式也可能在将来发生变化。

我猜测有可能是其他原因不这样做超越上述。

我想知道是否有反正写CSS规则的效果，自定义属性只适用于定义，否则没有效果。我希望找到一种仅依赖当前正在出货的自定义属性的解决方案，并且不会依赖诸如@apply等新建议。

Answer 1

你想要的是'revert' value，它解析为UA默认，而不是初始值。然后，您可以使用它作为回退值。

（我不认为这个关键字被广泛支持，但这是我们为这个问题设计的解决方案。）