v149 · CSS · demo

Focus-Within Dialog Boundary

A form tracks :focus-within with a blue highlight. In Chrome 149, focusing inside an open <dialog> no longer triggers the outer form's :focus-within style.

Outer form — background changes on :focus-within
:focus-within: inactive
form :focus-within
—
focus location
none

Dialog (top layer)

In Chrome 149, focusing any element inside this <dialog> does not propagate :focus-within to the outer form. The form's highlight stays off while you're in here.

 
/* Outer container highlights when any descendant is focused */
.outer-form:focus-within {
  background: var(--bg-ivory);
  box-shadow: var(--flat-shadow);
}

/* Chrome 149: focusing inside <dialog> does NOT
   propagate :focus-within to .outer-form,
   because dialog is a top-layer element (boundary). */
dialog input:focus {
  outline: 3px solid var(--accent-blue);
  /* :focus-within stops here; doesn't reach .outer-form */
}

see also

implementation reference

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