forge icon indicating copy to clipboard operation
forge copied to clipboard

implement `ElementInternals` and `formAssociated` APIs

Open DRiFTy17 opened this issue 2 years ago • 0 comments

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.

DRiFTy17 avatar Feb 20 '23 14:02 DRiFTy17