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

@scope

@scope は CSS のアットルールを使用すると、特定の DOM サブツリー内の要素を選択できるようになり、セレクターを DOM 構造に密接に結合させることなく、また上書きしにくい特定のセレクターを書くことなく、要素を正確に対象とすることができます。

JavaScript で @scope は CSS オブジェクトモデルインターフェイスの CSSScopeRule からアクセスすることができます。

スコープ設計

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@scope
118
118
146
17.4
118
17.4
DOM API
CSSScopeRule

CSSScopeRule は CSS オブジェクトモデルのインターフェイスで、 @scope アットルールを表します。
118
118
146
17.4
118
17.4
end

end は CSSScopeRule インターフェイスのプロパティで、 @scope アットルールのスコープリミットの値が入った文字列を返します。
118
118
146
17.4
118
17.4
start

start は CSSScopeRule インターフェイスのプロパティで、 @scope アットルールのスコープルートの値が入った文字列を返します。
118
118
146
17.4
118
17.4
CSS セレクタ
at-scope

`&` は `@scope` ブロック内で `:where(:scope)` として扱われます
143
143
142
26.2
143
26.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

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

/* Inline scope */
@scope (.sidebar) {
  :scope {
    background: #f8fafc;
    padding: 1rem;
  }

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

ライブデモ

cardinsidesco-p

@scope cardinsidesco-p demo.

プレビュー全画面表示

sidebarsco-p

@scope sidebarsco-p demo.

プレビュー全画面表示

nestedsco-p

@scope nestedsco-p demo.

プレビュー全画面表示

実務での使いどころ

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

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

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

    .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属性には影響しない。セマンティクスは通常通り設計する。

参考リンク