When you make a Web Component for a form element, you've got a bit of extra work to do to make sure they participate on the form in expected ways.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

A deep-dive into implementing Form-Associated Custom Elements (FACE) across a full web component library (AgnosticUI) built with Lit. Covers the ElementInternals API, a reusable Lit mixin pattern for sharing boilerplate, two validation strategies (delegating to inner native inputs vs. implementing directly against component state), and component-specific walkthroughs for inputs, checkboxes, toggles, radio groups, selects, sliders, rating widgets, comboboxes, and selection groups. Key gotchas include Shadow DOM isolation from parent forms, radio group required validation across shadow boundaries, the FormData overload for multi-value submission, handling both user and programmatic state changes, and the distinction between null and empty string in form payloads.

Form-Associated Custom Elements in Practice – Frontend Masters Blog

Sharing the Boilerplate: The Case for a Mixin