ElementInternals: states プロパティ

Baseline 2024

Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

states は ElementInternals インターフェイスの読み取り専用プロパティで、カスタム要素の取りうる状態を表す CustomStateSet を返します。

値

CustomStateSet です。これは文字列の Set です。

例

以下の関数は CustomStateSet に --checked という状態を追加・除去し、カスタムチェックボックスがチェックされたりチェックが外れたりすると true または false をコンソールに出力します。

js
set checked(flag) {
  if (flag) {
    this._internals.states.add('--checked');
  } else {
    this._internals.states.delete('--checked');
  }

  console.log(this._internals.states.has('--checked'));
}

仕様書

Specification
HTML Standard
# custom-state-pseudo-class

ブラウザーの互換性

BCD tables only load in the browser