`<wa-dropdown>` の見出し色から `!important` を除去してテーマ上書きを可能に

<wa-dropdown> コンポーネントの見出し（ラベル）スタイルにおいて、color プロパティへの !important 修飾を削除しました。これにより、ライトDOM側のスタイルからドロップダウン見出しの色をテーマとして上書きできるようになります。

背景

WebAwesome のドキュメントでは、<wa-dropdown> メニュー内の見出しとして h1〜h6 要素を使用することを推奨しています。しかし、これらの見出しに適用されるスタイルには color: var(--wa-color-text-quiet) !important が含まれており、ユーザーがライトDOMからテーマとして色を変更しようとしても上書きが一切効かない状態でした。

この問題は #2102 として報告されました。報告者が作成した CodePen のデモ では、!important を用いてもスタイルが反映されない様子が示されています。Shadow DOM 内の ::slotted() セレクターによって適用された !important スタイルは、外部のスタイルシートから上書きする手段がなく、テーマ機能の妨げとなっていました。

技術的な変更

変更は dropdown.styles.ts における color 宣言の !important 削除のみです。

変更前:

color: var(--wa-color-text-quiet) !important;

変更後:

color: var(--wa-color-text-quiet);

同じブロック内の display・margin・padding・font-family・font-weight・font-size の各プロパティには引き続き !important が残っていますが、color のみが除外されました。これにより、デフォルト色は --wa-color-text-quiet CSS カスタムプロパティを通じて引き続き適用されながら、ライトDOM側のスタイルルールで上書きできるようになります。

設計判断

::slotted() セレクター内での !important の使用 は、Shadow DOM のカプセル化において特殊な問題を引き起こします。通常、Shadow DOM 内のスタイルとライトDOMのスタイルにはカスケードの優先順位が定義されていますが、!important を組み合わせることでその逆転が起きます。本修正は、color プロパティに限って !important を外すことで、スタイルの継承とカスタマイズ可能性を回復させる最小限の変更となっています。

color プロパティから !important が削除された一方で、display や margin・padding といった他のプロパティでは維持されました。これにより、スタイルのカスタマイズは色に限定される形となっています。コンポーネントの構造的な整合性を保ちながらテーマ機能を有効にするための選択的な対応といえます。

まとめ

1行の変更でありながら、<wa-dropdown> の見出しカラーに対するテーマ適用性という根本的な課題を解消しています。Shadow DOM と ::slotted() を組み合わせた設計において !important がどのようにスタイルの上書きを封じてしまうかを示す典型的な事例であり、コンポーネントライブラリにおけるスタイルのカスタマイズ可能性設計の難しさを浮き彫りにしています。