v149 · developer trial · dom

Platform-provided behaviors

ElementInternals gains a list of "behaviors" you can opt your custom element into. The first one — HTMLSubmitButtonBehavior — wires up form-submission semantics, so a custom element can act like a submit button without extending HTMLButtonElement or reimplementing the activation logic.

concepts

  1. Fancy Submit

    A custom <fancy-submit> element that registers HTMLSubmitButtonBehavior on its internals. Drop it inside a form and it submits when activated, exactly as a native submit button would — but with custom rendering and a custom shadow DOM.

  2. Validation Relay

    A pill-shaped submit element that combines HTMLSubmitButtonBehavior with ElementInternals.form validation. The pill greys out when required fields are empty and refuses to submit — the same loop a native submit button runs.

  3. Custom Toggle Button

    A fully autonomous custom element that behaves like a native <button type=submit> — including form submission, disabled state, and Enter-key activation — via HTMLSubmitButtonBehavior. Compared side-by-side with the legacy extends HTMLButtonElement approach.

  4. Form Lifecycle Demo

    Watch every form-association lifecycle callback fire in real time as a custom element is inserted, removed, and moved between forms. See formAssociatedCallback, formDisabledCallback, and the element's reflected form property update live.

  5. Keyboard Activation

    Side-by-side comparison: a native <button type="submit"> versus a custom element using HTMLSubmitButtonBehavior. Tab to each button and press Enter or Space — both submit their forms identically. An event log shows every key event and submit.

  6. Native UX Demo

    Four scenario cards each with a Platform / Web override toggle: overscroll bounce via overscroll-behavior, scroll chaining with nested scrollables, iOS touch callout via -webkit-touch-callout, and tap highlight via -webkit-tap-highlight-color. Each toggle updates the live CSS property display alongside the interactive element.

why it shipped

Today, if you want a custom element that submits a form, you either extend HTMLButtonElement (which is unsupported in Safari) or wire up a click listener that walks up to the closest <form> and calls .requestSubmit(). The first option doesn't ship cross-browser; the second reimplements logic the platform already has. attachInternals({ behaviors: [HTMLSubmitButtonBehavior] }) lets you opt in to the platform's existing submit behaviour while keeping autonomous custom element semantics. The behavior list is extensible — more native behaviours will follow.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗