Workshop: Custom Form Controls with Web Components

The next iteration of this workshop happens on June 21st, 2024. You can register here.

Web Components promise universally applicable frontend components, but fulfilling this promise can sometimes be quite challenging – especially when it comes to forms! The CSS and functional encapsulation of Shadow DOM is both a blessing and a curse, API design is everything but straightforward, and many design questions and accessibility concerns surrounding custom form controls are far from resolved. But that's exactly what this workshop is for!

We tackle the problems of Web Components with a particular focus on forms and aim to write the best possible custom form controls with minimal code and dependencies. The workshop covers not only the fundamental APIs and web standards for form-associated custom elements but also discusses design issues, examines approaches for the use of form controls in pattern libraries, and presents a scalable architecture for custom form controls based on nested forms. The workshop also provides participants with an extensive hands-on section, giving them plenty of opportunities to gain their own experience with custom form controls.

The next iteration of this workshop happens on June 21st, 2024. You can register here.

Who the workshop is for

If you are a front-end developer who values web standards more than frameworks and would like to learn more about the patterns and challenges behind form-associated custom elements, this is for you. The workshop is focused heavily on the inner workings of web components, form controls, and associated web standards. Its goal is to enable you to develop better, more complete, more standards-aware web components in general and form-associated custom elements in particular - no matter your tech stack or choice of framework.

To get the most out of this workshop, you should already know your way around basic frontend technologies (HTML, CSS, modern JavaScript) and web components. You should also have some experience handling forms and form controls on the web.

The workshop is mostly about the technical side of integrating form-associated elements with existing web standards, not about the UI and UX of custom form controls.

What you'll learn

Why to bother with (vanilla) form controls

Developing form-associated custom elements is hard, but worth it: web components can (if built properly) be truly universal building blocks for your next web project. We take a short detour into the theory behind vanilla Web Components, figure out how they relate to framework-based components, and how we should think about dependencies when building web components.

APIs for form-associated (custom) elements

If you set out to build custom form controls, there is no way around Shadow DOM, ElementInternals and several APIs specific to form-associated (custom) elements. We take a deep dive into the web standards to figure out all the bits and pieces that need to be assembled for proper custom form-associated elements.

Patterns for developing custom form controls

Putting our knowledge about form-associated custom elements into practice requires some sort of architecture for custom form controls. This workshop presents a data-handling pattern based on nested forms in shadow DOM that can be combined with several different templating mechanisms. We will also touch on different approaches to code reuse when developing custom form controls.

Way more details about several web standards surrounding form controls

Web Components in general and form-associated custom elements in particular touch just about every aspect of frontend development, which is why this workshop will also need to be about almost everything. We will need to combine information on obsure details about HTML's handling of forms with the latest JavaScript APIs and our ability to juggle CSS and Shadow Roots to become experts on form-associated custom elements - so this is what we will do!

What you'll need

This workshop will include many practical sessions for which you will need:

• A foundation in HTML and CSS and JavaScript is recommended
• A laptop with text editor, a modern browser, and git installed and operational
• A free Github account (to be created prior to the workshop)
• Ability to perform basic git operations such as cloning, committing, pushing, pulling, and branching is recommended

About Peter Kröner

As a web platform expert and author Peter Kröner explores the future of web standards. His findings on HTML, CSS, and new JavaScript standards are shared through books, blog posts, his podcast "Working Draft", but also in seminars, workshops, and lectures. In his former life, Peter worked as a freelance web designer and front-end developer.

Opgave

Voor deze workshop is nog geen (nieuwe) datum gepland. Mocht je geïnteresseerd zijn in de workshop, hou dan het overzicht in de gaten of blijf op de hoogte via RSS en Twitter.

Archief

• Workshop: Custom Form Controls with Web Components, June 21st 2024, bij Social Impact Factory Vredenburg, Utrecht