New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
My design-system input looks perfect. Submit the form, and its value is nowhere in the request.
What you'll have at the end
A custom element with formAssociated set to true whose value appears in the submitted form data and clears when the form resets
You need
A custom element built around a shadow-DOM display for its value, already usable on a page outside any form, with buttons or an input a person can click and type into.
Not covered
Styling the control's own invalid or disabled look with CSS, and moving keyboard focus into the shadow root when a wrapping label is clicked.
Fix a shadow-DOM input that won't take focus from its label with delegatesFocus
when clicking a wrapping label, or calling focus from code, does not reach the input inside your shadow root
Test a custom element through its public API, not its shadow internals
when you want an automated check for this control's public behavior instead of confirming it by hand in a browser
Checked 25 Aug 2026
Part of the Web Components cookbook