Make your own form element using Web Components (90 minutes hands-on workshop)

Learn to create custom form elements that behave like built-in form elements including validation, form submission, and styling.


For a long time it was not possible to create custom form elements that behave like the built-in form elements and integrate nicely with the browser’s form handling. This changed with the introduction of the form-associated custom elements.

In this workshop, people will learn how to create their own custom form elements using this new feature based on a simple example. The first part of the course covers the basics of creating a Web Component including registration, attributes, life-cycle methods, and usage. The second part covers the creation of form-associated custom elements based on the ElementInternals API and explains how to use it to make them behave like the built-in form elements. This includes data validation, form submission, form reset, and styling.

All this will be based on a simple example that will be extended step by step.

The course will also cover the shortcomings of the current implementation and how to work around them.