CSS/@scope

@scope

@scopeは、CSSルールの適用範囲を限定するために使用されるルールです。この機能は、特定の要素やその子孫要素にのみスタイルを適用したい場合に便利です。@scopeを使用すると、スタイルのスコープを明示的に定義し、グローバルなスタイルの衝突を防ぐことができます。

基本的な@scopeの構文は以下の通りです：

@scope [<セレクター>] {
  <CSSルール>;
}

@scope (.scoped-container) {
  h1 {
    color: blue;
  }
}

この例では、.scoped-container内のh1要素に対してのみ、文字色を青にするスタイルを適用します。他の場所にあるh1要素には影響を与えません。

@scope (#section) {
  p {
    font-size: 18px;
  }
  a {
    text-decoration: none;
  }
}

この例では、#section内のp要素とa要素に対してのみスタイルが適用されます。

/* グローバルスタイル */
body {
  font-family: Arial, sans-serif;
}

/* スコープ内スタイル */
@scope (.special-section) {
  h2 {
    color: red;
  }
}

この例では、文書全体にはArialフォントが適用されますが、.special-section内のh2要素には文字色の赤が適用されます。

@scopeは、CSSの階層構造をより明確にするための機能です。コンポーネントベースのデザインや特定のセクションに限定したスタイルを記述する際に役立ちます。
スコープの範囲外にある要素にはスタイルが適用されません。
ブラウザサポート: 現在、@scopeは実験的な機能であり、一部の最新ブラウザでのみサポートされています。他のブラウザでは無視されるため、フォールバックのスタイルを用意することをお勧めします。

最新のブラウザ対応状況はCan I Useで確認してください。