forge
forge copied to clipboard
implement `ElementInternals` and `formAssociated` APIs
Describe the feature:
With WebKit recently adding support for the ElementInternals
and formAssociated
APIs in TP 162, we need to implement these APIs in all components that can interact with forms.
Current browser support: https://caniuse.com/?search=ElementInternals
Resources:
- https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
- https://web.dev/more-capable-form-controls/
- https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/
Describe any alternatives you've considered:
Currently, Forge components do not automatically participate in native form submission. This limitation has required that developers manually append the component values to the FormData
object upon submission:
const form = document.querySelector('form');
const mySelect = document.querySelector('forge-select#my-select');
// FormData event is sent on <form> submission, before transmission.
// The event has a formData property
form.addEventListener('formdata', ({ formData }) => {
// https://developer.mozilla.org/docs/Web/API/FormData
formData.append('my-select', mySelect.value);
});
There are more APIs for setting validity that are included as well, along with the ability to access the AOM through this API. This means that non-form aware components can also use the ElementInternals
API to set semantics without sprouting ARIA content attributes when a custom element is connected to the DOM.
Additional context: While these new APIs are great. They are still very new, and implementing them doesn't mean that developers can immediately rely on them because it takes a period of time for the global browser usage to catch up. Developers should still take caution to use feature detection to know whether they need to manually apply the values, or let the built-in APIs handle it.
The attachInternals()
method within the library will need to use feature detection because these APIs are still so new.