CSSにそのうち導入されそうな@scopeとその関連概念

ARANK

気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。 @scopeとは: 基本的な構文@scopeとは、次の例のような構文を持つ記法です。@scope (main) { div { border: 1px dashed black; } p { margin-block: 1em; } strong { color: red; } } このように、スタイルルールを@scope (セレクタ) { ... }という構文で囲むのが基本的な@scopeの構文です。@scopeの(セレクタ)部分にマッチした要素のことをscoping rootと言います。そして、@scopeのブロック内に書かれたセレクタは、scoping rootの子孫要素に対…