Study · CSS · Components
Querying a component state
Use a custom property as component data, then style descendants with a container style query.
Container queries can ask about more than width. A style query reads a value on the container, such as --variant: primary, and applies rules to its descendants when it matches. Choose a variant to see the card change while its structure stays the same. This specimen uses native style queries when they work and shows an equivalent class-based fallback otherwise. Read MDN’s guide to container style queries.
Component card
One structure, several tones
Its custom property describes the variant.@container style(--variant: primary) { /* rules */ }
Checking native style-query support…