v148 · CSS · focus · top layer

Top-Layer Focus Demo

Watch :focus-within in real time as focus moves between main-page elements, a dialog (top layer), and a popover (top layer). Chrome 148 stops these pseudo-classes from propagating across the top-layer boundary.

live focus monitor

Real-time focus tracking
—
—

selector status

In Chrome 148+, when focus moves into a dialog or popover (top layer), body:focus-within and main:focus-within no longer light up — the boundary blocks propagation.

focus contexts

Main page normal flow
Form normal flow

Dialog — Top Layer

This dialog lives in the top layer. In Chrome 148, focusing here does not propagate :focus-within back to the main page.

Popover — Top Layer

Same boundary rules apply to popovers in Chrome 148.

Chrome 148 boundary mode

Toggle to see an explanation of how the boundary changes :focus-within propagation.

Chrome 148 — boundary active
Chrome 148+: When focus enters a top-layer element (dialog, popover), :focus-within does not propagate to flat-tree ancestors. The boundary isolates focus state — matching Firefox and Safari's long-standing behaviour.

focus trap tester

Tab through these fields. The trap confines Tab navigation to this group — a pattern used in dialogs. Observe how the :focus-within indicators above track the active field.

Focus trap — tab cycles within this group

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗