The states read-only property of the ElementInternals interface returns a CustomStateSet representing the possible states of the custom element.
A CustomStateSet which is a Set of strings.
The following function adds and removes the state --checked to a CustomStateSet, then prints to the console true or false as the custom checkbox is checked or unchecked.
class MyElement extends HTMLElement {
set checked(flag) {
if (flag) {
this._internals.states.add("--checked");
} else {
this._internals.states.delete("--checked");
}
console.log(this._internals.states.has("--checked"));
}
}