CSS @scope：コンポーネント境界でセレクター範囲を定める
CSS `@scope`はrootと任意のlimitを指定して、セレクターが一致するDOM範囲を制限します。詳細度を下げたりスタイルを隔離したりするものではなく、重なる規則はcascadeとscoping proximityで決まります。
発行・訂正窓口：infostoa · 編集基準
この記事の個別の執筆者・専門査読者の情報は提供されていません。
CSS @scopeはセレクター規則が一致するDOM範囲を定めるat-ruleです。開始セレクターでscope rootを指定し、必要なら終了セレクターで境界を設けます。コンポーネント内だけに適用する規則を表しやすくなりますが、スコープが詳細度を自動で下げたり他のCSSから隔離したりするわけではありません。
スコープは一致範囲を制限しますが、継承は境界を越え得ます。
1. rootと任意のlimit
@scope (.card) { ... }は.cardに一致する要素をscope rootにし、ブロック内のセレクターをその範囲で照合します。root自体も規則の対象になり得ます。limitに一致する要素自身とその子孫は、そのスコープから除外されます。外側コンポーネントの規則が入れ子カードまで届くのを避ける用途があります。
スコープはDOM関係に基づく境界であり、独立したshadow treeやスタイル隔離環境ではありません。スコープ外の宣言やorigin、importance、layer、specificityなど通常のcascade基準は引き続き適用されます。既存CSSを@scopeで囲んでも、全域セレクターや別スコープとの競合が必ず消えるとは限りません。
2. 詳細度とscoping proximity
@scopeの開始セレクターの詳細度は、内部セレクターに自動で加算されません。ただし明示的な:scopeは疑似クラスの詳細度を加えます。他のcascade基準が同じでスコープが重なる場合、scoping proximityが宣言の優先を決める材料になります。対象要素に近いscope rootを持つ宣言が優先することがありますが、これはorigin、importance、layer、specificityなど先行する段階を比べた後に意味を持ちます。
したがって「最も近いスコープが常に勝つ」という説明は不十分です。originの優先度、importance、cascade layer、詳細度に差があれば先に勝者が決まる場合があります。調査時は開発者ツールで適用宣言を確認し、rootとの距離だけでなくcascade全体の順序を追います。
3. 入れ子コンポーネントとscope limit
scope limitは外側コンポーネントの規則が内側へ届く範囲を限定できます。たとえば.cardのスコープで入れ子の.cardをlimitにすると、内側カードを外側スコープから除外できます。ただし内側コンポーネント自身の規則や、さらに詳細なセレクターの結果は別に検討します。
この方法はコンポーネントCSSを読みやすくし、クラス名の衝突を減らすのに役立つことがありますが、スタイルのカプセル化と同じではありません。たとえばcolorはlimit要素とその子孫にも継承され得ます。セレクターの一致範囲を制限しても、継承は遮断されません。実際の入れ子DOMを使い、limitが期待する境界を作るか試験します。
4. 専門家の視点：範囲を宣言して検証する
引用するCSSWG文書は作業中のEditors Draftだ。ここでは@scope直下にネストした&を:where(:scope)のように定義する。この草案の記述を確定したW3C Recommendationとして示さない。
導入時はrootとlimitを明確なコンポーネント境界に合わせ、入れ子マークアップで何が一致するか確認します。これはcascade順序を簡略化した説明です。先行する基準が同じなら、specificityの後、宣言順序の前にscoping proximityを比較します。対象ブラウザーの対応範囲も確認し、必要な代替スタイルを用意してください。@scopeはセレクター範囲を表す手段であり、cascadeそのものを置き換えるものではありません。