Web Components Community

Jared White
Jared White

Posted on • Originally published at spicyweb.dev

Blending Web Components Into Standard HTML Forms

Because until fairly recently this wasn't a widely-supported and recognized feat, you'd be forgiven for thinking that you can't yet add custom elements as controls in standard HTML forms.

Thankfully as of the latest major release cycle, all evergreen browsers support the FormDataEvent which allows you to participate in the gathering up of a form's data prior to submission.

Here's a Pen with a working demonstration showing that a custom element can add one or more fields to its parent form. It's a remarkably straightforward API to use.

form.addEventListener("formdata", event => {
  event.formData.append(name, value)
})
Enter fullscreen mode Exit fullscreen mode

Note that this isn't the only spec which has been in the works for web component form controls. There's also the ElementsInternals API which provides for some additional capabilities to affect form behavior such as validation, label associations, and enhanced accessibility. There's not yet full cross-browser support for this API, so for less complex requirements, we can leverage the FormDataEvent for essential form participation today.

* For older browsers which don't support FormDataEvent, you can see an example of a polyfill here.


Want to join a fabulous community of web developers learning how to use “vanilla” web specs like HTTP, HTML, CSS, JavaScript, & Web Components—plus no-nonsense libraries & tools which promote developer happiness and avoid vendor lock-in?

Join The Spicy Web Discord

Discussion (1)

Collapse
kaina profile image
James Lovallo

This is certainly better than what I've been doing, adding a hidden input outside of the Shadow DOM and updating the value as the user types inside the component's input. When I publish form element's I'll probably still do this because it's foolproof, but for my own personal elements I will definitely give this a try. Thanks for sharing!