Make your own form element using Web Components (90 minutes hands-on workshop)
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.