【CSS Modules】:defined疑似クラスの使い方
:defined疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:definedオブジェクトは、Webコンポーネントのカスタム要素がJavaScriptによってブラウザに定義され、利用可能な状態であることを表すオブジェクトです。この:definedは、CSSにおいて特定の状態にある要素にスタイルを適用するために使用される疑似クラスの一つです。特に、Web Components仕様の一部であるCustom Elements（カスタム要素）に関連して利用されます。
カスタム要素とは、開発者が独自のHTML要素を定義できる技術ですが、それらはJavaScriptコードによって定義され、ブラウザに登録される必要があります。:defined疑似クラスは、このようなカスタム要素がHTMLElementとして完全に定義され、ブラウザにアップグレードされた状態、すなわち、その要素の定義がロードされ、利用可能になった状態のときにのみ要素にマッチします。
これにより、カスタム要素が完全に準備ができた後にのみ、特定のCSSスタイルを適用することが可能になります。例えば、まだJavaScriptで定義されていない未定義のカスタム要素（<my-element>など）と、定義済みのカスタム要素で異なる視覚的な表現を持たせたい場合に役立ちます。この疑似クラスは、まだJavaScriptで定義されていないカスタム要素にはマッチしません。要素がブラウザによって完全に認識され、その機能が利用可能になってからスタイルを適用することで、ユーザーインターフェースの一貫性と安定性を保つことができます。
公式リファレンス: :defined
構文(syntax)
1custom-element-name:defined { 2 /* スタイル */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません