:state()
:state()は、カスタム要素（Custom Elements）がElementInternals.states APIを通じて公開するカスタム状態に基づいてスタイルを適用する擬似クラスです。組み込みの擬似クラス（:checked、:disabledなど）と同様の方法で、カスタム要素の状態を外部からスタイリングできます。Web Componentsのスタイルカスタマイズ性を大幅に向上させる重要な機能です。
概要
:state()は、カスタム要素（Custom Elements）がElementInternals.states APIを通じて公開するカスタム状態に基づいてスタイルを適用する擬似クラスです。組み込みの擬似クラス（:checked、:disabledなど）と同様の方法で、カスタム要素の状態を外部からスタイリングできます。Web Componentsのスタイルカスタマイズ性を大幅に向上させる重要な機能です。
対応ブラウザ
デスクトップ
Chrome 125+
Edge 125+
Safari 17.4+
Firefox 126+
モバイル
Chrome Android 125+
Safari iOS 17.4+
Firefox Android 126+
基本構文
CSS
my-toggle:state(checked) {
background-color: #3498db;
color: white;
}
my-toggle:state(disabled) {
opacity: 0.5;
}実務での使いどころ
-
カスタム要素の状態スタイリング
カスタムトグルスイッチのON/OFF状態やカスタムアコーディオンの展開/折りたたみ状態に応じたスタイルを外部CSSから適用します。
注意点
- ElementInternals.statesのAPIはformAssociatedでないカスタム要素でも使用可能ですが、attachInternals()の呼び出しが必要です。
アクセシビリティ
- カスタム要素の状態はElementInternalsを通じてアクセシビリティツリーにも反映されるため、適切なARIAロールと状態の設定を併せて行ってください。