【CSS Modules】::slotted疑似要素の使い方
::slotted()疑似要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
::slotted()クラスは、Shadow DOMの<slot>要素に挿入されたコンテンツを表すクラスです。この擬似要素は、Web Components（ウェブコンポーネント）において、カプセル化されたコンポーネントの内部構造（Shadow Tree）に外部（Light DOM）からHTMLコンテンツを「投影」する際に、その投影されたコンテンツ（スロット化されたノード）に対してCSSスタイルを適用するために使用されます。
Shadow DOMは、カスタム要素のスタイルを外部からカプセル化し、コンポーネントの独立性を保つための技術です。通常、Shadow DOM内のCSSは、外部から挿入されたコンテンツには直接適用されません。ここで::slotted()擬似要素が重要な役割を果たします。シャドウルート内でこの擬似要素を使用することで、<slot>要素に直接割り当てられ、投影されたLight DOMの要素を明示的に選択し、スタイルを適用することが可能になります。これにより、コンポーネント開発者は、挿入されるコンテンツの見た目をコンポーネントのデザインに合わせて統一的に制御できます。
重要な注意点として、::slotted()セレクターが選択できるのは、<slot>に直接挿入されたトップレベルの要素のみです。挿入された要素のさらに子孫要素に対しては、::slotted()を使って直接スタイルを適用することはできません。子孫要素のスタイリングには、JavaScriptによるクラス操作やCSSカスタムプロパティ（CSS変数）の活用など、別の方法を検討する必要があります。::slotted()は、Web Componentsにおける柔軟なスタイル管理を実現する上で不可欠な機能です。
構文(syntax)
1::slotted(selector) { 2 /* property: value; */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません