ElementInternals

ELI5 - The Vibe Check

ElementInternals is what finally lets a custom my-input element behave like a real form field: showing up in FormData, participating in validation, getting labelled by label for, all the stuff native input elements get for free. Before this, Web Components had to fake being form fields with hacky workarounds. Now they can actually join the form.

Real Talk

ElementInternals is a browser API that lets custom elements participate in HTML forms and accessibility trees natively, by attaching internals via attachInternals(). It enables form associated custom elements to set form values, expose validity states, and define ARIA properties without needing a hidden native input as a workaround.

Show Me The Code

class RatingInput extends HTMLElement {
  static formAssociated = true;
  constructor() {
    super();
    this.internals = this.attachInternals();
  }
  setValue(v) {
    this.internals.setFormValue(v);
  }
}

When You'll Hear This

"Once we used ElementInternals, our custom rating widget finally showed up in FormData on submit." / "ElementInternals gives Web Components real form validity states, not just a fake required attribute."