スコープ付きスタイルのための@scope

@scope at-rule（Chrome 118以降、Safari 17.4以降）は、CSSルールをDOM内の特定のサブツリーに限定します。@scope内のルールは、宣言されたスコープルート内の要素にのみ適用されるため、コンポーネント間でのスタイルの漏れを防げます。

スコープルートセレクターを指定してスコープを宣言します。内側のすべてのルールは、一致するスコープルートの子孫要素にのみ適用され、ドキュメント全体には適用されません。

スコープルート（@scope (.card)）が開始地点を定義します。スコープ内で.titleに一致する要素がスタイリングされます。.cardの外側にあるclassが.titleの要素には影響しません。Shadow DOMを使わずに、真のスタイルカプセル化を実現できます。

toを使って、スコープ境界を任意で定義できます：@scope (.card) to (.nested-card)。ルールは.card内に適用されますが、.nested-cardの子孫要素で止まります。これにより、コンポーネントの1段階のネストにだけスタイルを適用し、さらに深い階層のインスタンスを除外できます。

@scopeブロック内では、:scopeはスコープルート要素自体を指します。@scope (.card) { :scope { border-radius: 8px; } }は、子孫要素ではなく.card要素そのものをスタイリングします。

@scopeは、近接性に基づく詳細度を導入します。複数のスコープが要素に一致する場合、セレクターの詳細度に関係なく、最も近い祖先のスコープルートが優先されます。これにより、深くネストされたコンポーネントのスタイルが、遠い祖先スコープのスタイルに上書きされるのを防げます。

CSS Modules は、ビルド時に一意のハッシュ化されたクラス名を生成してスコープ化を実現します。これは JavaScript バンドラー側の仕組みです。一方、@scope はビルドツールやハッシュ化された名前、フレームワーク固有の構文を使わず、ブラウザー上でネイティブにスコープ化を実現します。純粋な CSS の機能です。

Shadow DOM は完全なスタイル分離を実現するため、外部のスタイルが内部に到達することはありません。@scope は部分的な分離を実現するため、外部のスタイルでも詳細度が十分に高ければスコープ内の要素に適用できます。@scope は、完全な分離を必要とせずにコンポーネントをスコープ化できる、より軽量な選択肢です。

@scope と @layer を組み合わせると、カスケードをきめ細かく制御できます。コンポーネントのスコープ付きスタイルをコンポーネント用のレイヤーに定義します。これにより、レイヤーでカスケードの順序を、@scope でスタイルの適用範囲を管理でき、クラス名を複雑に工夫することなく、組み合わせ可能な形で利用できます。

デザインシステムのコンポーネントでは、すべてのボタンのスタイルを @scope (.button-group) に限定すると、内側のボタンのスタイルが外部に漏れ出すことはありません。ウィジェットの分離では、サードパーティ製ウィジェットのスタイルをそのコンテナに限定することで、ページ全体のグローバルスタイルとの衝突を防げます。

@scope は Chrome 118 以降、Safari 17.4 以降、Firefox 128 以降でサポートされています。対応していないブラウザーでは、@scope 内のスタイルは無視され、カスケードはグローバルスタイルにフォールバックします。コンポーネントのスコープ化が便利ではあっても必須ではない場合に、@scope を段階的な機能強化として使用してください。

従来の CSS セレクターだけでは解決しにくい、どのような問題を @scope は解決しますか？

@scope は CSS ルールの適用範囲を、宣言した DOM サブツリーに限定し、Shadow DOM やビルドツールによるクラス名のハッシュ化を使わずに、ネイティブなスタイルのカプセル化を実現します。スコープの境界、近接性による詳細度、@layer との統合により、純粋な CSS でコンポーネント単位のデザインシステムを構築するための強力な基盤となります。