A paragraph in the card.
a nested component
A paragraph in the slot.
Another paragraph in the card.
Tools
@scope Playground
A rule that applies from one element down to a boundary you name, and no further. Toggle the two boundaries and watch which paragraphs turn purple.
Newly availablesince Mar 2026
Your browser does not support @scope, so every paragraph keeps its default colour. That is the fallback: the rule is skipped whole, never half applied.
A paragraph outside the card.
CSS
What class names could never do
.card p styles every paragraph inside the card, including the ones inside a component somebody
dropped into it. The old answers were longer selectors, naming conventions, or a build tool that rewrote class
names. @scope (.card) to (.slot) says it directly: from the card, down to the slot, not including
it. The nested component keeps its own styles and the card’s author never had to know what it was.
Proximity: a new tiebreak
When two scoped rules match the same element with the same specificity, the one whose scope root is closer wins, regardless of source order. Nested light and dark themes finally resolve the way a person expects: the nearest theme wins.
Low specificity on purpose
The scope root adds nothing to specificity, so scoped rules stay easy to override, and
:scope inside the block refers to the root itself. Compare selectors in the
specificity calculator, and see who ships @scope.