このページは Cloud Translation API によって翻訳されました。

CSS @scope at-rule でセレクタのリーチを制限する

@scope を使用して、DOM の限定されたサブツリー内の要素のみを選択する方法について学習します。

Bramus

Twitter GitHub Mastodon ホームページ

対応ブラウザ

CSS セレクタの繊細な記述

セレクタを記述する際、2 つの世界に行き詰まることがあります。一方で、選択する要素を細かく指定することをおすすめします。一方、セレクタは簡単にオーバーライドでき、DOM 構造には密接に結び付かないようにする必要があります。

たとえば、「カードコンポーネントのコンテンツエリアのヒーロー画像」を選択する場合（これはかなり特殊な要素の選択です）、.card > .content > img.hero のようなセレクタを記述することはおすすめしません。

このセレクタは (0,3,1) の特異性がかなり高いため、コードが拡大してもオーバーライドが難しくなります。
直接の子コンビネータに依存することで、DOM 構造と密接に結合されます。マークアップが変更される場合は、CSS も変更する必要があります。

しかし、その要素のセレクタとして img のみを記述することはおすすめしません。ページ内のすべての画像要素が選択されるためです。

この中で適切なバランスを見出すことは、多くの場合、困難な作業です。何年にもわたって、一部のデベロッパーは、このような状況で助けとなる解決策や回避策を見つけてきました。例:

BEM などの方法では、その要素に card__img card__img--hero のクラスを割り当て、特異性を低く抑えながら、選択対象を具体的に指定しています。
スコープ CSS やスタイル付きコンポーネントなどの JavaScript ベースのソリューションでは、ランダムに生成される文字列（sc-596d7e0e-4 など）をセレクタに追加して、すべてのセレクタが書き換えられ、ページの反対側の要素がターゲティングされないようにします。
一部のライブラリではセレクタが完全に廃止されており、スタイル設定のトリガーをマークアップ自体に直接配置する必要があります。

では、それらが不要な場合はどうすればよいでしょうか。CSS によって、選択対象の要素を細かく指定でき、特異性の高いセレクタや、DOM に密接に結びついたセレクタを記述する必要がないとしたらどうでしょうか。そこで役立つのが @scope です。これにより、DOM のサブツリー内の要素のみを選択できるようになります。

@scope のご紹介

@scope を使用すると、セレクタのリーチを制限できます。そのためには、ターゲットとするサブツリーの上限を決定するスコープルートを設定します。スコープのルートセットを使用すると、含まれるスタイルルール（スコープのスタイルルール）は、DOM の限られたサブツリーからのみ選択できるようになります。

たとえば、.card コンポーネントの <img> 要素のみをターゲットにするには、.card を @scope at-ルールのスコープルートとして設定します。

@scope (.card) {
    img {
        border-color: green;
    }
}

スコープスタイルルール img { … } では、一致した .card 要素のスコープ内にある <img> 要素のみを効果的に選択できます。

カードのコンテンツ領域（.card__content）内にある <img> 要素が選択されないようにするには、img セレクタをより限定します。別の方法として、@scope at ルールでも、下限を決定するスコープ制限を受け入れます。

@scope (.card) to (.card__content) {
    img {
        border-color: green;
    }
}

このスコープスタイルのルールは、祖先ツリーの .card 要素と .card__content 要素の間にある <img> 要素のみをターゲットにします。このようなスコープ設定（上限と下限）は、よく「ドーナツスコープ」と呼ばれます。

`:scope` セレクタ

デフォルトでは、スコープのスタイルのルールはスコープのルートを基準としています。スコープ対象ルート要素自体をターゲットに設定することもできます。そのためには、:scope セレクタを使用します。

@scope (.card) {
    :scope {
        /* Selects the matched .card itself */
    }
    img {
       /* Selects img elements that are a child of .card */
    }
}

スコープを適用したスタイル規則内のセレクタには、暗黙的に :scope が付加されます。必要に応じて、先頭に :scope を追加することで、そのことを明示的に指定できます。または、CSS Nesting の & セレクタを先頭に追加することもできます。

@scope (.card) {
    img {
       /* Selects img elements that are a child of .card */
    }
    :scope img {
        /* Also selects img elements that are a child of .card */
    }
    & img {
        /* Also selects img elements that are a child of .card */
    }
}

スコープ上限では、:scope 疑似クラスを使用して、スコープ対象ルートとの特定の関係を要求できます。

/* .content is only a limit when it is a direct child of the :scope */
@scope (.media-object) to (:scope > .content) { ... }

:scope を使用すると、スコープ上限はスコープルート外の要素を参照することもできます。例:

/* .content is only a limit when the :scope is inside .sidebar */
@scope (.media-object) to (.sidebar :scope .content) { ... }

スコープを適用したスタイルのルール自体で、サブツリーをエスケープすることはできません。範囲外の要素を選択しようとするため、「:scope + p」のような選択は無効です。

`@scope` と特異性

@scope の前半で使用するセレクタは、含まれるセレクタの特異性に影響しません。以下の例では、img セレクタの特異性は依然として (0,0,1) です。

@scope (#sidebar) {
    img { /* Specificity = (0,0,1) */
        …
    }
}

:scope の特異性は、通常の疑似クラス（つまり (0,1,0)）に特異性です。

@scope (#sidebar) {
    :scope img { /* Specificity = (0,1,0) + (0,0,1) = (0,1,1) */
        …
    }
}

次の例では、内部的に & が、スコープ対象ルートに使用されるセレクタに書き換えられ、:is() セレクタ内にラップされます。最終的に、ブラウザはマッチングのためのセレクタとして :is(#sidebar, .card) img を使用します。このプロセスを脱糖といいます。

@scope (#sidebar, .card) {
    & img { /* desugars to `:is(#sidebar, .card) img` */
        …
    }
}

& は :is() を使用して脱糖されるため、& の特異性は :is() の特異性ルールに従って計算されます。つまり、& の特異性は最も限定的な引数の特異性です。

この例に適用すると、:is(#sidebar, .card) の特異性はその最も具体的な引数、つまり #sidebar の特異性であるため、(1,0,0) になります。これを img の特異性（(0,0,1)）と組み合わせると、複雑なセレクタ全体の特異性として (1,0,1) になります。

@scope (#sidebar, .card) {
    & img { /* Specificity = (1,0,0) + (0,0,1) = (1,0,1) */
        …
    }
}

`@scope` 内の `:scope` と `&` の違い

特異性の計算方法の違いに加えて、:scope と & のもう一つの違いは、:scope が一致したスコープ対象ルートを表し、& がスコープ対象ルートのマッチングに使用されるセレクタを表すことです。

このため、& を複数回使用できます。これは、1 回しか使用できない :scope とは対照的です。これは、スコープ対象ルート内ではスコープ対象ルートをマッチングできないためです。

@scope (.card) {
  & & { /* Selects a `.card` in the matched root .card */
  }
  :root :root { /* ❌ Does not work */
    …
  }
}

プレリュードなしのスコープ

<style> 要素を使用してインラインスタイルを記述する場合、スコープルートを指定しないことで、スタイルルールの適用範囲を <style> 要素を包含する親要素に設定できます。これを行うには、@scope の前置詞を省略します。

<div class="card">
  <div class="card__header">
    <style>
      @scope {
        img {
          border-color: green;
        }
      }
    </style>
    <h1>Card Title</h1>
    <img src="…" height="32" class="hero">
  </div>
  <div class="card__content">
    <p><img src="…" height="32"></p>
  </div>
</div>

上記の例では、div が <style> 要素の親要素であるため、スコープルールが、クラス名 card__header の div 内の要素のみをターゲットにします。

カスケード内の @scope

また、CSS カスケード内に、@scope によって「近接範囲のスコープ」という新しい条件が追加されています。このステップは、特異性の後、外観の順番の前に行われます。

CSS カスケードの可視化

仕様どおり:

スコープ対象ルートが異なるスタイルルール内の宣言を比較する場合は、スコープ対象ルートとスコープ対象スタイルルールのサブジェクト間の世代または兄弟要素のホップ数が最も少ない宣言が優先されます。

この新しい手順は、コンポーネントの複数のバリエーションをネストするときに便利です。以下の例では、まだ @scope を使用していません。

<style>
    .light { background: #ccc; }
    .dark  { background: #333; }
    .light a { color: black; }
    .dark a { color: white; }
</style>
<div class="light">
    <p><a href="#">What color am I?</a></p>
    <div class="dark">
        <p><a href="#">What about me?</a></p>
        <div class="light">
            <p><a href="#">Am I the same as the first?</a></p>
        </div>
    </div>
</div>

この小さなマークアップを表示すると、3 番目のリンクは、クラス .light が適用された div の子であっても、black ではなく white になります。これは、カスケードがここで勝者を決定する際に使用する外観の基準の順序によるものです。.dark a が最後に宣言されているため、.light a ルールから優先されます。

範囲決定の近接条件を使用すれば、この問題を解決できます。

@scope (.light) {
    :scope { background: #ccc; }
    a { color: black;}
}

@scope (.dark) {
    :scope { background: #333; }
    a { color: white; }
}

スコープが指定された a セレクタの限定性はどちらも同じであるため、スコープの近接条件が機能します。この手法では、スコープするルートまでの距離に基づいて両方のセレクタに重み付けを行います。その 3 番目の a 要素では、.light スコープルートへのホップが 1 つしかなく、.dark へのホップが 2 つになっています。したがって、.light の a セレクタが優先されます。

結びの注記: スタイルの分離ではなくセレクタの分離

注意すべき重要な点の一つは、@scope ではセレクタのリーチが制限され、スタイルを分離できないということです。子まで継承されるプロパティは、@scope の下限を超えて継承されます。そのようなプロパティの一つが color です。そのスコープをドーナツのスコープ内で宣言した場合も、color は、ドーナツの穴の内側にある子まで継承されます。

@scope (.card) to (.card__content) {
  :scope {
    color: hotpink;
  }
}

上記の例では、.card__content 要素とその子は .card の値を継承するため、hotpink 色になります。

（カバー写真: rustam burkhanov、Unsplash）