demo · v149

Fancy Submit

A <fancy-submit> element with its own rendering — but submits the surrounding form like a native button when activated, thanks to HTMLSubmitButtonBehavior.

Send it

Form validity pending…

the element

class FancySubmit extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals({ behaviors: [new HTMLSubmitButtonBehavior()] });
  }

  set disabled(value) {
    this.toggleAttribute("disabled", Boolean(value));
    this.setAttribute("aria-disabled", String(Boolean(value)));
    this.tabIndex = value ? -1 : 0;
  }
}
customElements.define("fancy-submit", FancySubmit);

That's the whole element. Submit semantics — including form validation, the submit event, and :disabled handling — come from the registered behavior. No requestSubmit dance.

see also

implementation reference

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