Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

:state()

:state() は CSS の擬似クラスで、特定のカスタム状態を持つカスタム要素に一致します。

カスタム要素状態管理

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:state
125
125
126
17.4
125
17.4
DOM API
CustomStateSet

ドキュメント オブジェクト モデルの CustomStateSet インターフェイスは、自律カスタム要素の状態のリストを保存し、状態をセットに追加したりセットから削除したりできるようにします。
90
90
126
17.4
90
17.4
@@iterator

[シンボル.イテレータ］
90
90
126
17.4
90
17.4
add

CustomStateSet インターフェイスの add メソッドは、カスタム状態を表す値を CustomStateSet に追加します。
90
90
126
17.4
90
17.4
clear

CustomStateSet インターフェイスの clear() メソッドは、CustomStateSet オブジェクトからすべての要素を削除します。
90
90
126
17.4
90
17.4
delete

CustomStateSet インターフェイスの delete() メソッドは、CustomStateSet から 1 つの値を削除します。
90
90
126
17.4
90
17.4
entries

CustomStateSet インターフェイスのエントリ メソッドは、CustomStateSet の各要素の [value,value] の配列を含む新しい反復子オブジェクトを返します。
90
90
126
17.4
90
17.4
forEach

CustomStateSet インターフェイスの forEach() メソッドは、CustomStateSet オブジェクトの各値に対して提供された関数を実行します。
90
90
126
17.4
90
17.4
has

CustomStateSet インターフェイスの has() メソッドは、指定された値を持つ要素が存在するかどうかを示すブール値を返します。
90
90
126
17.4
90
17.4
keys

CustomStateSet インターフェイスの key() メソッドは、CustomStateSet.values のエイリアスです。
90
90
126
17.4
90
17.4
size

CustomStateSet インターフェイスの size プロパティは、CustomStateSet 内の値の数を返します。
90
90
126
17.4
90
17.4
values

CustomStateSet インターフェイスのvalues() メソッドは、CustomStateSet オブジェクト内の各要素の値を挿入順に生成する新しい反復子オブジェクトを返します。
90
90
126
17.4
90
17.4
states

states は ElementInternals インターフェイスの読み取り専用プロパティで、カスタム要素の取りうる状態を表す CustomStateSet を返します。
90
90
126
17.4
90
17.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • `:state()` の代わりに破線の ID (`:--foo` など) を使用します。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • `:state()` の代わりに破線の ID (`:--foo` など) を使用します。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • `:state()` の代わりに破線の ID (`:--foo` など) を使用します。

基本構文

CSS 
my-toggle:state(checked) {
  background-color: #3498db;
  color: white;
}
my-toggle:state(disabled) {
  opacity: 0.5;
}

ライブデモ

:state(checked) style

CSS:state(checked) style demo.

プレビュー全画面表示

:state(disabled) style

CSS:state(disabled) style demo.

プレビュー全画面表示

:state(loading) style

CSS:state(loading) style demo.

プレビュー全画面表示

実務での使いどころ

  • カスタム要素の状態スタイリング

    カスタムトグルスイッチのON/OFF状態やカスタムアコーディオンの展開/折りたたみ状態に応じたスタイルを外部CSSから適用します。

注意点

  • ElementInternals.statesのAPIはformAssociatedでないカスタム要素でも使用可能ですが、attachInternals()の呼び出しが必要です。

アクセシビリティ

  • カスタム要素の状態はElementInternalsを通じてアクセシビリティツリーにも反映されるため、適切なARIAロールと状態の設定を併せて行ってください。

参考リンク