demo · v133
A real design-system input — clicking the label vs the field
A custom-element labelled text input that wraps a slotted <input>. Before the fix, clicking the surrounding chrome would focus the shadow host instead of the slotted field — meaning the caret wouldn't land where the user clicked. After 133, it does.
plain <input> (baseline)
design-system wrapper with slotted input
what the bug looked like
Component libraries (Lit, Stencil, FAST, internal design systems) ship custom elements that wrap a real form control via <slot>. The shadow host has padding, an icon, a label — everything but the input itself. Clicking that surrounding chrome should focus the slotted input. Before this fix, the click traversal walked up the tree of trees hunting for a fallback, jumped over the slotted element, and landed on the shadow host. The user had to click the input directly, which on tablet-size touch targets is hostile.
// What the fix changes — fallback traversal now walks the flat tree
// rather than the parent/host chain.
shadowHost.querySelector('slot[name=control]')
.assignedNodes()[0]
.focus(); // <-- what the fix simulates implicitly