ElementInternals

class RatingInput extends HTMLElement {
  static formAssociated = true;
  #internals;
  #value = 0;

  constructor() {
    super();
    this.#internals = this.attachInternals();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button type="button">★ vergeben</button>';
    root.querySelector('button').addEventListener('click', () => {
      this.value = (this.#value % 5) + 1;
    });
    this.#update();
  }

  get value() { return this.#value; }
  set value(v) {
    this.#value = Number(v);
    this.#update();
  }

  #update() {
    this.#internals.setFormValue(this.#value ? String(this.#value) : null);
    if (this.hasAttribute('required') && !this.#value) {
      this.#internals.setValidity(
        { valueMissing: true },
        'Bitte eine Bewertung abgeben.',
        this.shadowRoot.querySelector('button')
      );
    } else {
      this.#internals.setValidity({});
    }
  }

  get form() { return this.#internals.form; }
  get validity() { return this.#internals.validity; }
  checkValidity() { return this.#internals.checkValidity(); }

  formResetCallback() { this.value = 0; }
}

customElements.define('rating-input', RatingInput);

// HTML: <form id="f"><rating-input name="sterne" required></rating-input></form>
const form = document.querySelector('#f');
const rating = form.querySelector('rating-input');
console.log(rating.checkValidity());
rating.value = 4;
console.log(Object.fromEntries(new FormData(form)));

class ToggleSwitch extends HTMLElement {
  static formAssociated = true;
  #internals = this.attachInternals();

  connectedCallback() {
    this.#internals.role = 'switch';
    this.#internals.ariaChecked = 'false';
    this.tabIndex = 0;
    this.addEventListener('click', () => this.toggle());
  }

  toggle() {
    const on = !this.#internals.states.has('checked');
    on ? this.#internals.states.add('checked') : this.#internals.states.delete('checked');
    this.#internals.ariaChecked = String(on);
    this.#internals.setFormValue(on ? 'on' : null);
  }
}

customElements.define('toggle-switch', ToggleSwitch);

// CSS: toggle-switch:state(checked) { background: green; }
const sw = document.createElement('toggle-switch');
document.body.append(sw);
sw.click();
console.log(sw.matches(':state(checked)'));

class DateField extends HTMLElement {
  static formAssociated = true;
  #internals = this.attachInternals();

  formDisabledCallback(disabled) {
    // wird z. B. von <fieldset disabled> ausgelöst
    this.toggleAttribute('aria-disabled', disabled);
    console.log('deaktiviert:', disabled);
  }

  formStateRestoreCallback(state, mode) {
    // mode: 'restore' (Zurück-Navigation) oder 'autocomplete'
    console.log('Wiederherstellung', mode, state);
    this.#internals.setFormValue(state);
  }

  formAssociatedCallback(form) {
    console.log('zugeordnet zu', form?.id ?? 'keinem Formular');
  }
}

customElements.define('date-field', DateField);