【CSS Modules】:scope疑似クラスの使い方
:scope疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:scopeオブジェクトは、CSSセレクタが評価される際の現在のコンテキストにおけるルート要素を表すオブジェクトです。
このオブジェクトは、セレクタの評価範囲の起点を明確に指定するために使用されます。
一般的なHTMLドキュメントにおいて:scopeを使用した場合、通常はドキュメントツリーの最上位にある<html>要素、すなわち:root擬似クラスと同じ要素を選択します。
しかし、Web ComponentsのShadow DOMのように、独立したDOMツリーを持つ特殊なコンテキスト内で:scopeを使用すると、そのShadow DOMのルート要素であるShadow Hostを選択するようになります。
これにより、コンポーネント内部のスタイルを定義する際に、そのコンポーネント自身のルート要素に対してスタイルを適用したり、そこを起点として内部の要素を選択したりすることが可能になります。
:scopeは、スタイルが特定の範囲内でのみ有効であることを保証し、コンポーネントの独立性を高める上で非常に重要です。
特定のコンテキストにおける境界を明確にすることで、意図しない要素へのスタイルの影響を防ぎ、より局所的で保守性の高いCSS記述を可能にするのが、この:scopeオブジェクトの主な役割です。
公式リファレンス: :scope
構文(syntax)
1:scope { 2 /* 現在のスコープのルート要素にスタイルを適用 */ 3 display: block; 4 border: 1px solid #ccc; 5 padding: 10px; 6}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません