demo · v133

Focus traversal trace

Two visually identical custom elements — one without a slotted target (legacy host-fallback), one with a slotted <input> (flat-tree traversal). Click anywhere in the gutter and see which path the focus took, and which element ended up with the caret.

before: focus parks on host

@
click around ↑ to trace

after: focus finds slotted input

click around ↑ to trace

what changed

Pre-133 the algorithm for resolving the mouse-focus target walked the composed DOM ancestor chain. When the click landed on a slotted child, the walk hopped out of the shadow tree into the light tree and parked on the shadow host. That meant most design-system inputs (a wrapping shadow host containing a slotted <input>) failed to give the input the caret on outer clicks — users had to click the bare textbox precisely. The fix changes the walk to the flat tree: the slot is found, the assigned slotted element receives focus, and design-system inputs finally behave the way users expect.

see also