:state()
Document Object Model の CustomStateSet インターフェイスは、自律型カスタム要素の状態のリストを格納し、セットへの状態の追加と削除を可能にします。
このインターフェイスは、カスタム要素の内部状態を公開するために使用でき、要素を使用するコードが CSS セレクターでそれらを使用できるようにします。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| 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 |
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (125)
- `:state()` の代わりに破線の ID (`:--foo` など) を使用します。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (125)
- `:state()` の代わりに破線の ID (`:--foo` など) を使用します。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (125)
- `:state()` の代わりに破線の ID (`:--foo` など) を使用します。
実務での使いどころ
-
:state() の活用
Document Object Model の CustomStateSet インターフェイスは、自律型カスタム要素の状態のリストを格納し、セットへの状態の追加と削除を可能にします。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。