2024年Chrome 118+/Safari 17.4対応。@scope (.card) { ... } scoped CSS+Donut Selector+Style Containment+CSS Module代替+Component Scoped CSS Native対応搭載。
CSS @scope ruleは2024年5月にSafari 17.4で対応し主要ブラウザBaselineに到達した新CSS仕様で、CSSのスコープ(影響範囲)を制限する@scope at-rule。Vue/Svelte/Astroのscoped style・CSS Modules・CSS-in-JS(Emotion/styled-components)が解決していた「スタイルの局所化」問題を、CSS Nativeで実現する。@scope (.card) { p { color: red; } } のように記述し、.card要素配下のpにのみスタイル適用する。さらにDonut Selector(@scope (.card) to (.inner))で「ある要素から別の要素まで」の範囲限定も可能で、コンポーネント階層が深くなる場合も柔軟にスコープ制御できる。Chrome 118+/Edge 118+/Firefox 132+/Safari 17.4+で対応し、2026年5月時点でProduction採用に十分。
@scope (.card) { ... } で指定要素配下にスコープ限定@scope (.card) to (.inner) で「.card内、.inner以外」のスコープ:scope { background: ... }@layer components { @scope (.card) { ... } } で優先度制御@scope (.card) { & p { ... } }[class*=Component_module__hash] のセレクタ汚染なし| 項目 | CSS @scope | Vue Scoped Style | CSS Modules | CSS-in-JS |
|---|
| 実装 | CSS Native | Vue前処理 | Build前処理 | Runtime JavaScript |
| Selector汚染回避 | スコープ制限 | data-v-hash属性 | クラス名hash | JavaScript Runtime |
| Donut Selector | ○ | × | × | × |
| Browser Support | Baseline 2024 | 全ブラウザ | 全ブラウザ | 全ブラウザ |
| Bundle Size | 0KB増 | Vue Compile | Build処理 | 5-50KB Library |
| Runtime Cost | 0 | 0 | 0 | あり |
| Cascade Layers連携 | ○ | × | △ | △ |
| 学習曲線 | CSS知識 | Vue知識 | Build設定 | Library知識 |
/* 基本的な @scope */
@scope (.card) {
p {
color: var(--text-primary);
}
/* :scope = .card 自身 */
:scope {
padding: 1rem;
}
}
/* Donut Selector: .card内、.card-actions以外 */
@scope (.card) to (.card-actions) {
/* .card-actions の内部はスコープ外 */
p { color: blue; }
}
/* CSS Nestingと併用 */
@scope (.modal) {
& .header {
background: gray;
& h2 {
color: white;
}
}
}
/* Cascade Layers併用 */
@layer components {
@scope (.btn) {
:scope {
padding: 0.5rem 1rem;
}
}
}
@scope Pluginサポート、ユーティリティクラスとの併用CSS @scope ruleはWeb開発者向けの新CSS仕様で、jisaku.comのComponent System(React 19+TypeScript+Tailwind CSS 4)では Tailwindベースのユーティリティクラス中心設計のため、@scope の出番は限定的。一方、サードパーティJavaScript(Disqus・Twitter Widgets等)を埋め込む場合や、CMS Embed Widget・既存サイトへのComponent注入時に、グローバルCSS汚染回避策として有効。@scope (.embed-widget) { ... } でコンテナ要素配下にCSS スコープを完全分離できる。CSS Modulesからの移行では、Build時のClass Name Hash 不要+Bundle Size削減+Source Map単純化のメリット。Web Components/Shadow DOMはより強力なEncapsulationを提供するが、Light DOM(通常DOM)で動作するスコープ制限なら@scopeで十分。Donut Selectorは複雑なネストUI(Card内にButton、Buttonは外部スタイル維持等)で威力発揮。Chrome/Firefox/Safari全Baseline対応で、Production採用にBlockerなし。jisaku.comでは将来的にCSS Modules→@scope移行の検討余地あり、Bundle Size削減+Build時間短縮の効果が期待できる。
Vue Scoped Styleとの違い: Vue ScopedはVue前処理(<style scoped>)で data-v-hash 属性経由、@scopeはCSS Native仕様で全Framework共通。Vueの場合は両者併用も可能、フレームワーク非依存ならば@scope。
CSS Modulesとの違い: CSS ModulesはBuild時にClass Name Hash生成、@scopeはCSS at-rule仕様。CSS Modulesは強い分離+Vendor互換性、@scopeはCSS Nestingやcascade連携で柔軟。
Q1: @scope と CSS Modules どちらを使うべき？ A: 既存プロジェクトでCSS Modules採用済みなら継続。新規プロジェクト+Modern Stack(Vite/Next.js 15+)+Browser Baseline 2024要件なら @scope の方がBundle削減+Build短縮で優位。
Q2: Donut Selector の実用例は？
A: Card UI内部に独立コンポーネント(Button・Avatar)がある場合、Cardのテーマカラーを内部全体に適用しつつButton/Avatarは外部スタイル維持。@scope (.card) to (.btn, .avatar) { ... } で実現、子コンポーネントの再利用性確保。
Q3: TailwindCSS 4 と @scope の関係は？
A: 直接競合せず補完関係。Tailwindはユーティリティクラス、@scopeはComponent内のCSSスコープ制限。Tailwindベースの中で @apply 使用箇所や3rd-party CSS埋め込み時に @scope を併用するのが理想的な使い分け。