Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

対応ブラウザ

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

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

90
90
126
17.4
90
17.4
@@iterator

[シンボル.イテレータ]

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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

90
90
126
17.4
90
17.4

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` など) を使用します。

実務での使いどころ

  • :state() の活用

    Document Object Model の CustomStateSet インターフェイスは、自律型カスタム要素の状態のリストを格納し、セットへの状態の追加と削除を可能にします。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。