6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
Open in app
This is your last free member-only story this month. Upgrade for unlimited access.
Member-only story
Web Components Can Now Be Native Form
Elements
Here’s the complete guide to customised form controls
Danny Moerkerke · Follow
Published in JavaScript in Plain English
7 min read · Aug 10, 2022
Listen Share More
Photo by Chris Hainto on Unsplash
Custom Form Controls
One area in which developers have always wanted to customize elements is forms.
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 1/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
Historically, it has often been hard to style form controls to give them the look and
feel you want.
The styling options are often limited and to this day, form controls like date and
color pickers are still inconsistent across browsers.
Many websites also need more advanced form controls that the native platform
simply doesn’t provide (yet).
Web Components are ideal candidates for customised form controls because they
are first-class HTML tags but unfortunately, they don’t provide the functionality of
built-in form controls out of the box.
For example, when a form is submitted, customised form controls built with
Custom Elements are not included in the form data.
Other functionalities like form validation and autofill are also not available to
Custom Elements and are hard to replicate.
Luckily, there are two solutions available for these issues: the formdata event and the
ElementInternals interface.
FormData event
The formdata event is fired when a form is submitted and enables any JavaScript
code to add arbitrary data to the form data that is submitted.
You can set an event listener for this event that will receive the event object with a
formData property that contains all data being submitted by the form.
Each event listener can then add to or modify the data before it’s submitted:
const form = document.querySelector(‘form’);
form.addEventListener(‘formdata’, ({formData}) => {
// add data
formData.append(‘custom-control’, customValue);
// modify data
formData.set(‘email’, formData.get(‘email’).toLowerCase());
});
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 2/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
The formData property of the event is a FormData object.
ElementInternals interface
While the formData event is very handy, it is limited to adding arbitrary data to the
data being submitted by the form.
For a Custom Element to be a true form control it should also be automatically
associated with the form and participate in form validation.
That is what the ElementInternals interface is for.
It enables Custom Elements to be associated with a form so they are added to the
elements property of the form and the value of the element will be automatically
submitted with the form.
It also enables Custom Elements to participate in form validation.
The element can indicate whether its value is valid or invalid and prevent the form
from being submitted when it’s invalid.
It can also be labeled with a <label> element which means the label is
programmatically associated with the form element.
When a user clicks or taps the label, the form element will receive focus.
This increases the area for focusing on the element which provides a good user
experience, especially on mobile devices.
It will also cause screen readers to read out the label when the user focuses on the
form element.
Associating a Custom Element with a form
The first step to creating a custom form control with a Custom Element is to
associate it with the form.
This means it will be part of the form’s elements property, which is an
HTMLFormControlsCollection containing all form controls contained by the form.
In the previous example, you have seen how you can add entries to a FormData
object using its append method.
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 3/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
It’s also possible to create a FormData object directly from all elements and their
values in a form by passing the form to the FormData constructor:
const form = document.querySelector(‘form’);
// formData now contains all data of form
const formData = new FormData(form);
formData now contains all data of the form including any Custom Elements that
have been associated with the form.
Here’s the class of a form-associated Custom Element:
class FormInput extends HTMLElement {
static formAssociated = true;
constructor() {
super();
this.internals = this.attachInternals();
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.internals.setFormValue(value);
}
get form() {
return this.internals.form;
}
get name() {
return this.getAttribute(‘name’);
}
get type() {
return this.localName;
}
}
This example shows a minimal implementation of a form-associated Custom
Element. Let’s look at the individual parts.
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 4/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
static formAssociated = true;
By setting the static formAssociated property to true , the Custom Element will be
associated with the form and it will be included in the form’s elements property.
This won’t however include the value of the Custom Element in the form data yet.
For that, the ElementInternals interface will need to be attached to the element:
this.internals = this.attachInternals();
attachInternals returns the ElementInternals object which is then stored in the
internals property of the Custom Element.
In order to get the value of the Custom Element that will be submitted with the
form, this value needs to be set with:
this.internals.setFormValue(value);.
In the example, this line has been added to the setter for the value property to
make sure that whenever value is set, its form value will also be set.
This is the value that will be submitted with the form.
The other getters for form , name , and type are standard properties that native form
elements have.
This is the bare minimum your component should have to become a custom form element.
Of course, this component doesn’t render anything yet so it’s not very useful. Let’s
change that by adding a Shadow Root with an <input> element:
constructor() {
super();
this.internals = this.attachInternals();
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 5/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
const shadowRoot = this.attachShadow({mode: ‘open’});
shadowRoot.innerHTML = `
<style>
:host {
display: inline-block;
}
input {
display: block;
padding: 5px;
}
</style>
<input type=”text”>
`;
}
Now that the component has an <input> , we first need to make sure that the value
of the input is available as the value of the component that is submitted with the
form.
Recall that we created a setter for the value property that calls
this.internals.setFormValue(value) .
We can get the value of the input each time it changes through its change event.
When this event is fired, we simply set the value property of our component which
will call the setter which calls this.internals.setFormValue(value) .
Let’s add the needed event listener:
this.input = this.shadowRoot.querySelector(‘input’);
this.input.addEventListener(‘change’, (e) => {
this.value = this.input.value;
});
Now every time the value of the input changes, the value of the component is
updated and the correct value will be submitted with the form.
Of course, the other way around should also work: when the value property of the
component is set, the value property of the <input> should also be set.
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 6/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
The setter should be changed to this:
set value(value) {
this._value = value;
this.input.value = value; // set the value of the input
this.internals.setFormValue(value);
}
And the code that uses our component will also expect a change event to be fired
since it now contains an <input> element.
Therefore, the event from the <input> should be forwarded.
We can’t simply dispatch it again, since that will throw an error saying the event was
already dispatched but we can clone it and then forward it:
this.input.addEventListener(‘change’, (e) => {
const clone = new e.constructor(e.type, e); // clone the event
this.dispatchEvent(clone); // and then forward it
this.value = this.input.value;
});
Now the value of the component and the input are kept in sync and the component
fires a change event.
Labeling the custom form control
Now that you have associated your Custom Element with the form, you can also
associate it with a <label> .
The benefit of this is that the Custom Element will also be programmatically
associated with the label.
This means, for example, that a screen reader will read out the label text when a
user focuses the input and that when the label is clicked or tapped, the associated
input will be focused.
This increases the touch area of the input, making it easier to focus, especially on a
mobile device.
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 7/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
There are two ways of associating a form control with a <label> .
The simplest is to place the form control inside the <label> .
This makes the association very clear:
<label>
City
<input type=”text” name=”city”>
</label>
The other way is to use the for attribute of the <label> .
The value of this attribute should be the id of the form control you want to
associate it with:
<label for=”city”>City</label>
<input type=”text” id=”city”>
This may come in handy when the label and the form control are in different places
in the DOM or when you can’t place the control inside the label for some reason.
There are two additional things that need to be done to make clicking the label
focus the <input> inside your custom form control.
First, the component should be made focusable. This is done by adding a tabindex
attribute.
This attribute indicates that an element is focusable and the order in which
elements will be focused when a user uses the TAB key to navigate through form
controls.
Normally, the focus order relies on the order in which the elements occur in the
DOM but with tabindex this can be altered.
It means that for example an element with tabindex 4 will be focused before an
element with tabindex 5 but after an element with tabindex 3.
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 8/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
When two elements have the same tabindex the order in the DOM takes precedence
so if you want to keep this order but need to add tabindex to make elements
focusable, you can use tabindex="0" for all of them.
To make sure the element always has a tabindex attribute, you can check if it’s
present and add it if it’s not:
if (!this.hasAttribute(‘tabindex’)) {
this.setAttribute(‘tabindex’, ‘0’);
}
Now that your component is focusable, it will be focused when the <label> it’s
associated with is clicked or tapped.
But since the <input> inside it needs to be focused, the focus should be delegated
with the following code:
this.addEventListener(‘focus’, () => this.input.focus());
Now when the <label> is clicked, the <input> inside the component will be
focused.
Here’s the complete component:
class FormInput extends HTMLElement {
static formAssociated = true;
constructor() {
super();
this.internals = this.attachInternals();
const shadowRoot = this.attachShadow({mode: ‘open’});
shadowRoot.innerHTML = `
<style>
:host {
display: inline-block;
}
input {
display: block;
padding: 5px;
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 9/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
}
</style>
<input type=”text”>
`;
}
connectedCallback() {
this.input = this.shadowRoot.querySelector(‘input’);
this.input.addEventListener(‘change’, (e) => {
const clone = new e.constructor(e.type, e);
this.dispatchEvent(clone);
this.value = this.input.value;
});
this.addEventListener(‘focus’, () => this.input.focus());
if (!this.hasAttribute(‘tabindex’)) {
this.setAttribute(‘tabindex’, ‘0’);
}
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.internals.setFormValue(value);
}
get form() {
return this.internals.form;
}
get name() {
return this.getAttribute(‘name’);
}
get type() {
return this.localName;
}
}
And here’s a working codepen:
HTML JS Result
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 10/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
Custom Element form control
Be sure to check my follow-up article that explains how Web Components can
participate in native form validation.
Join Modern Web Weekly, my weekly newsletter on the modern web platform, web
components and Progressive Web Apps.
JavaScript Web Development Web Components Programming Coding
Follow
Written by Danny Moerkerke
1.6K Followers · Writer for JavaScript in Plain English
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 11/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
I write about what the modern web is capable of, Web Components and PWA, creator of
https://whatpwacando.today
More from Danny Moerkerke and JavaScript in Plain English
Danny Moerkerke in ITNEXT
How To Hydrate A Server-Side Rendered Web Component
An in-depth guide to lazy loading Web Components
· 12 min read · May 11
39
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 12/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
The woman in JavaScript in Plain English
A 20-year-experienced CTO’s Advice “Don’t Be a Humble Developer”
I think 90% of the developers are victims of their modesty!!
· 4 min read · Jun 12
1.5K 26
Somnath Singh in JavaScript in Plain English
Bill Gates: People Don’t Realize What’s Coming
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 13/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
Tech Jobs Won’t Exist in 5 Years
· 13 min read · Apr 13
14.1K 347
Danny Moerkerke in ITNEXT
How To Server-Side Render A Web Component
Blazing fast lazy-loaded Web Components
· 6 min read · Apr 29
78 1
See all from Danny Moerkerke
See all from JavaScript in Plain English
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 14/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
Recommended from Medium
Danny Moerkerke in ITNEXT
The Hidden Power of Custom States For Web Components
A crucial step in the evolution of Custom Elements
· 6 min read · Nov 16, 2022
299 2
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 15/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
Jennifer Fu in Better Programming
Ant Design System Dark Mode and Other Theme Customization
It takes one line of code to set up dark mode for an Ant Design System app
· 12 min read · Feb 21
225 1
Lists
General Coding Knowledge
20 stories · 27 saves
Stories to Help You Grow as a Software Developer
19 stories · 149 saves
It's never too late or early to start something
10 stories · 9 saves
Coding & Development
11 stories · 15 saves
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 16/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
pandaquests in Level Up Coding
Difference between service workers and web workers
Web workers have been quite around for a while. Service worker is a new-ish concept. Both
enable you to run JavaScript in the background…
· 4 min read · Jan 3
81
JP Brown
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 17/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
What Really Happens to a Human Body at Titanic Depths
A Millisecond-by-Millisecond Explanation
· 4 min read · 5 days ago
23K 276
Rakia Ben Sassi in Level Up Coding
Unleash the Cheetah: A Real-World Case Study of Optimizing Angular
Rendering Performance
Boost your application’s speed and improve user experience with these proven techniques
· 11 min read · Feb 6
108
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 18/19
6/28/23, 4:48 PM Web Components Can Now Be Native Form Elements | JavaScript in Plain English
Israel Miles in Level Up Coding
Build Reusable and Customized Web Components Using Stencil.js
Increase your web development flexibility with your own unique HTML tags.
· 3 min read · Jan 8
52
See more recommendations
https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386 19/19
