ホスト要素への `box-sizing` 強制適用を廃止

host.styles.ts に含まれていた box-sizing 宣言から !important を除去しました。これにより、Web Componentsのホスト要素に対して外部スタイルから box-sizing を上書きできるようになります。

背景

コミット 33eccfc にて、コンポーネントのホストスタイルを修正する変更が行われましたが、その際に !important が追加されました。その後、コミットへのコメントで問題が指摘され、本PRの契機となりました。

PR著者と関係者が調査した結果、!important を付与する明確な根拠が見当たらず、「急いで（かつ誤って）追加された」と判断されています。

技術的な変更

packages/webawesome/src/styles/component/host.styles.ts において、:host および :host * 系セレクターの box-sizing 宣言から !important が削除されました。

変更前:

:host {
  box-sizing: border-box !important;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: inherit !important;
}

変更後:

:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: inherit;
}

!important を除去しても box-sizing: border-box がデフォルトとして適用される点は変わりません。変わるのは、利用者が外部CSSでホスト要素の box-sizing を上書きできるかどうかです。

設計判断

!important を使わない通常の宣言に戻す というシンプルな方針が採用されました。

Web Componentsのシャドウ境界は、内部スタイルと外部スタイルを自然に分離します。この境界があるにもかかわらず !important を用いることは、コンポーネント利用者のカスタマイズ余地を不必要に奪うことになります。box-sizing のようなレイアウトに関わるプロパティをコンポーネント側が強制するのは、コンポジションの柔軟性を損なう設計です。

!important を除去することで、コンポーネントは「デフォルトは border-box、ただし上書き可能」というより協調的なスタイル設計に戻ります。これはライブラリが外部環境に対して持つべき姿勢と一致しています。

まとめ

小さな1行の変更ですが、Web Componentsライブラリとしての設計姿勢を正す修正です。!important という強権的な記述を取り除くことで、コンポーネントを組み込む側の開発者が box-sizing を自由に制御できるようになり、より柔軟なスタイル統合が可能になります。