v133 · dom

Fix mouse focus for slotted elements in Shadow DOM

Currently, mouse-triggered event will traverse up to the parent or shadow host to find fallback element to receive mouse focus. This doesn't make sense for slotted content, where we expect the fallback element to receive focus to be the assigned slot, instead of its parent. This is fixed by changing that step to traverse the Flat Tree.

concepts

  1. Slotted Mouse Focus

    Slotted form controls now receive focus on mouse click instead of the shadow host. Bug fix for thousands of design-system components.

  2. Design-system input

    A real labelled text input custom element wraps a slotted <input>. Click the icon, the label, the gutter — the caret now lands inside the field, where users always expected.

  3. Focus traversal trace

    Click anywhere in the gutter of two side-by-side custom elements — one legacy host-fallback, one flat-tree slotted — and see which path the focus took, plus what document.activeElement ends up.

  4. Focus matrix

    Every slottable form element (input, checkbox, select, textarea, button) in a grid of live custom elements. Click the gutter of each card and verify that document.activeElement is the slotted element — not the shadow host.

why it shipped

The Chromium issue was opened in 2018 and has 9 stars.

references