沒有設置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默認，而不是初始值。然後，您可以使用它作爲回退值。

（我不認爲這個關鍵字被廣泛支持，但這是我們爲這個問題設計的解決方案。）