https://drafts.csswg.org/css-cascade-6/#scope-atrule
CSS に @scope という機能が増えるようです
@scope (.foo) to (.bar) {
a { color: red; }
}
と書けば DOM のツリー上で .foo の内側で .bar の外側を対象に a タグの色を変えるということになります
ShadowDOM みたいなスタイルのスコープ機能が追加されるということですね
WebComponents を使うなら ShadowDOM でいいですが React 等のフレームワークの場合はコンポーネントごとに ShadowDOM を使わないのでスコープを制御し辛いです
なのでこういうのがあると便利になりそうです
これに合わせて Scope Proximity という新しい概念が追加されてスタイルの優先度にも変更があるようです
詳細度が同じ場合 セレクタの対象要素とスコープのルート要素間の距離が近いほど優先度が高くなります
スコープが指定されないこれまでのスタイル定義だと距離が無限（優先度最小）として扱われるようです
例えばタブがあって その中にフォームがあって タブとフォームにスコープが設定されていて フォームパーツは両方のスコープに入る場合 まずフォームスコープのスタイルが優先されて次にタブスコープのスタイルで 最後にページ全体のということのようです
優先度的には良さそうです
ただ詳細度の方が優先度が上なので やっぱり詳細度には悩まされそうです
構文的には
@scope [(<scope-start>)]? [to (<scope-end>)]? {
<rule-list>
}
なので scope-start や scope-end は省略できるみたいです
scope-end を省略すると
@scope (.dark-scheme) {
a { color: plum; }
}
CSS のネスト機能が使えるようになる前なら ネスト機能としても使えるので需要が高かったのかもしれません
でも今では先にネスト機能が使えるようになっているので あまりこのケースは使わなそうです
ネスト機能と同じようなことができますが 全く同じではなく少しだけ違いがあります
@scope に指定するセレクタ (上の場合の .dark-scheme) の部分は詳細度に含まれません
ネストの場合に詳細度に影響しないよう :where() を使うような挙動です
その場合でもスコープによる優先度があるので :where() を使うより @scope の方が優先度が高くなります
scope-start を省略する場合は その style タグの親要素がスコープのルートになります
<div>
<style>
@scope {
p { color: red; }
}
</style>
<p>ここは赤色</p>
</div>
<p>ここは赤色じゃない</p>
昔 style タグに scoped 属性がありましたが それに近いことができますね
