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
Clicking the label next to my custom text field does nothing, and calling .focus() on the element from code doesn't do anything either.
What you'll have at the end
A shadow root with delegatesFocus set to true, so clicking the host lands the caret in the real input
You need
A form-associated custom element (static formAssociated set to true, attachInternals called once in the constructor) whose shadow root wraps one real, focusable input, already rendering next to an ordinary label pointing at the element's own id.
Not covered
Building the element's form association in the first place, and deciding which CSS pseudo-class draws the visible keyboard focus ring.
Make a custom element form-associated so it submits like a native field
when your custom element isn't form-associated yet, so a wrapping label has no valid target to click at all, delegatesFocus or not
Stop the flash of unstyled content in a shadow-DOM component with Declarative Shadow DOM
when the shadow root is created declaratively from a template element instead of with attachShadow in a constructor, and you need the matching declarative attribute for delegated focus
Checked 25 Aug 2026
Part of the Web Components cookbook