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)
})
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?
Oldest comments (2)
This is certainly better than what I've been doing, adding a
hiddeninput 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!Add to the discussion