CSSカスタムプロパティが設定されていないときに適切なデフォルト値に戻る

Question

CSSカスタムプロパティをWebコンポーネントのテーマ解決策として使用していますが、カスタムプロパティを同じ方法で適用する最善の方法については不明ですカスタムプロパティが指定されていない場合、適切なデフォルト動作を維持します。

例：シャドウツリー内に<button>要素が含まれているコンポーネントを作成し、アプリケーションのブランド化のニーズに応じて、コンポーネントテーマのユーザーに含まれているボタンのフォアグラウンドおよびバックグラウンドカラーを許可します。

<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は、このためには不十分であることを期待するために、それは合理的だ。このため、DOMは次のようになります。 var()を使用すると、ブラウザのデフォルトのユーザーエージェントスタイルシートが上書きされるため、カスタムプロパティが指定されていない場合は、要素のデフォルト値ではなく、すべての要素のカラープロパティが基底のデフォルト値に戻ります。だから、ボタンは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デフォルトのに解決されます。これをフォールバック値として使用できます。

（私はキーワードが広く、まだサポートされているとは思わないが、それは我々がこの問題に設計したソリューションです。）