v149 · Custom Elements · ElementInternals
Custom Toggle Button
HTMLSubmitButtonBehavior in ElementInternals.behaviors lets a custom element participate in form submission just like a real <button type=submit>. No subclassing, no click handler boilerplate — the platform wires the semantics.
live demo
before vs. after
BEFORE extending HTMLButtonElement
// Requires extending a built-in —
// not supported in Safari, needs polyfill
class MyBtn extends HTMLButtonElement {
connectedCallback() {
this.type = 'submit';
}
}
customElements.define(
'my-btn',
MyBtn,
{ extends: 'button' } // ← the problem
);AFTER HTMLSubmitButtonBehavior
class MyBtn extends HTMLElement {
#internals;
connectedCallback() {
this.#internals =
this.attachInternals();
this.#internals.behaviors.add(
HTMLSubmitButtonBehavior
);
}
}
customElements.define('my-submit-btn', MyBtn);what HTMLSubmitButtonBehavior provides
- Click on the element triggers form submission (same as
<button type=submit>) - Enter key in any form text field triggers the element's click
- Form validation runs before submission
disabledattribute blocks submission- Works with all existing form APIs:
form.submit(),form.requestSubmit()
see also
- Fancy Submit — styled submit button with full form integration
- Validation Relay — custom element that owns validation
- Feature index
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗