Newly available 条件付きYES。Baseline Newly available。コンポーネントスコープの新しいアプローチとして有望。非対応ブラウザへのフォールバック戦略が必要。
構文・カスケード Newly available

@scope

@scope はCSSルールの適用範囲をDOMツリーの特定部分に限定するアットルール。スコープルート（開始点）とスコープリミット（終了点）を指定でき、コンポーネントのスタイルが外部に漏れることを防ぐ。BEMやCSS Modulesに頼らないネイティブなスコーピングを実現。

スコープ設計

概要

@scope はCSSルールの適用範囲をDOMツリーの特定部分に限定するアットルール。スコープルート（開始点）とスコープリミット（終了点）を指定でき、コンポーネントのスタイルが外部に漏れることを防ぐ。BEMやCSS Modulesに頼らないネイティブなスコーピングを実現。

対応ブラウザ

デスクトップ

Chrome 143+
Edge 143+
Safari 26.2+
Firefox 146+

モバイル

Chrome Android 143+
Safari iOS 26.2+
Firefox Android 146+

基本構文

CSS 
@scope (.card) to (.card-footer) {
  p {
    color: #4b5563;
    line-height: 1.6;
  }

  a {
    color: #2563eb;
    text-decoration: underline;
  }
}

/* インラインスコープ */
@scope (.sidebar) {
  :scope {
    background: #f8fafc;
    padding: 1rem;
  }

  nav a {
    display: block;
    padding: 4px 0;
  }
}

実務での使いどころ

  • コンポーネントスタイルの隔離

    コンポーネント内のスタイルが外部に漏れず、外部のスタイルも内部に影響しない。

  • スコープリミットによる除外

    .card 内だが .card-footer 内ではない要素だけにスタイルを適用。ネストされたコンポーネントの境界を明確化。

注意点

  • Baseline Newly available のため、広範なブラウザ対応が必要なプロジェクトではフォールバック手段を用意する。
  • 既存のスコーピング手法（BEM・CSS Modules）との使い分けを検討する。

フォールバック戦略

CSS 
/* フォールバック: クラスベースのスコーピング */
.card p {
  color: #4b5563;
  line-height: 1.6;
}

/* モダンブラウザ: @scope */
@scope (.card) to (.card-footer) {
  p {
    color: #4b5563;
    line-height: 1.6;
  }
}

アクセシビリティ

  • スコープはスタイルの適用範囲のみに影響し、DOM構造やARIA属性には影響しない。セマンティクスは通常通り設計する。

参考リンク