Style queries
@container style(), container style queries, style queryDefinition
The other half of container queries: @container style(--variant: compact) applies styles when the container’s custom property has a given value, so a component can restyle its children by a token its parent sets, without a class on every child
Where container size queries answer “how wide am I,” style queries answer “what did my parent decide” — a treatment, in this site’s vocabulary, passed down as a custom property and read by everything inside. Shipped for custom properties in Chromium and Safari; Firefox in progress, so still a progressive enhancement. The pattern to watch: a --treatment: anchor on the accordion’s root and @container style(--treatment: anchor) on its parts is a treatment implemented with no markup change, which is the test the glossary says a treatment must pass.
A custom property as a switch the whole subtree can read. It turns a design decision into one line at the top instead of a class on every part.