Platform-provided behaviors allow custom elements to adopt native HTML
behaviors through attachInternals({ behaviors: [...] }). The first
behavior, HTMLSubmitButtonBehavior, turns a custom element into a
submit button that participates in form submission, contributes name/value
pairs, supports form override attributes, triggers implicit submission,
exposes the correct accessibility semantics, and responds to keyboard
activation.
Read
the explainer.
Give feedback.
about://flags in Microsoft Edge or another Chromium-based browser (version 149+).
The Submit form button below is a <my-submit-button>
custom element with HTMLSubmitButtonBehavior, which makes it submit
forms just like a native <button type="submit"> element. Click
the custom submit button below, or press Enter while focused on a field, to
submit the form.
The two buttons below are <override-submit-button> custom elements.
Each one sets name, value, and formMethod
on its HTMLSubmitButtonBehavior instance to override the form's
default method and include its own name/value pair in the submission data.
The Search button below is an <implicit-submit-button>
custom element. When a form contains a custom element with
HTMLSubmitButtonBehavior, pressing Enter in a text field
triggers implicit submission through that element, just like it would with a
native submit button. Try pressing Enter in the input below.
The Accessible submit button below is an
<a11y-submit-button> custom element. Custom elements with
HTMLSubmitButtonBehavior automatically get:
role="button"tabindex=0)Try using Tab to focus the button below, then press Enter or Space to activate it.
Inspect the custom element in DevTools. Its computed accessibility role is
button, with no explicit ARIA attributes needed.
View source on GitHub