demo · v148

Focus-Within Boundary

The sibling angle to :hover: :focus-within at the top-layer boundary. Before Chrome 148, opening a <dialog> with form fields inside lit up every ancestor :focus-within rule — including the form card that triggered the dialog. With the boundary in place, focus stays inside the top-layer container.

The card outline is styled with fieldset.form-card:focus-within { background: amber; }. Focus the email input on the card to see the amber state. Click "Open verification dialog"; focus an input inside the dialog. In Chrome 148+, the outer card stays calm. Before, it would still be amber — the focus state bled through the layer boundary.

checkout · email

verify your address

Enter the 6-digit code we sent you.
Status: no focus

the code

// Outer card lights up amber whenever focus is inside it.
fieldset.form-card:focus-within {
  background: amber;
}

// Open a <dialog> modal that contains its own input.
// Pre-148: focus inside the dialog *also* counted as inside the card —
// the card stayed amber, which was visually confusing.
// In 148+: the dialog escapes into the top layer, and :focus-within
// stops at that boundary. Card returns to neutral as expected.

see also

implementation reference

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