カスタム要素の状態を定義する CustomStateSet と参照する擬似クラス :state()

Published at 2024-04-07

Safari 17.4 で CustomStateSet がサポートされた。CustomStateSet は Web Components のカスタム要素の状態を管理する API で、Element Internals の states プロパティに含まれる。Element Internals はカスタム要素の振る舞いを HTML のフォームと連動させるための仕様だ。

CustomStateSet は JavaScript のグローバルオブジェクトである Set と同様のインターフェースで、CustomStateSet に追加された文字列がカスタム要素の「状態」を定義する。

次のデモは HTML の minlength 属性を <input type="number"> で動的に設定し振る舞う Web Components である¹。<input type="text"> や <input type="number"> の値を変更すると、validate() メソッドで入力値のバリデーションを行い、その結果を Element Internals オブジェクトの setValidity() メソッドで設定するとともに、states プロパティで状態を指定している。

ここでは、入力値の長さが minlength の値より小さい場合にエラーを報告しつつ、error という値を保存している。これによって、この HTMLElement は Element Internals の states プロパティによって状態が宣言されることになる。:state() 擬似クラスは、CustomStateSet オブジェクトで定義される状態を参照し、任意の識別子として参照できる。ここでは error という状態を :state(error) のように参照し、スタイリングしている。