@scope
Native CSS Scoping
A descendant selector like .card .title matches at any depth, which turns into a problem the moment one .card contains another one reusing the same class names. @scope applies a rule only within a subtree, with an optional lower bound where it stops looking. No BEM discipline, no Shadow DOM.
Command deck
.title styled by the outer rule
This heading should be tinted with the accent colour, whichever mode is on.
Cargo bay
.title reused, same class name
This one is a completely different component instance that just happens to share a class name with its ancestor.
The CSS
/* plain descendant selector: matches .title at ANY depth,
including a .card nested inside another .card */
.card .title {
color: var(--accent);
}
/* @scope, donut-scoped: styles .title inside the nearest .card,
but stops before crossing into a .card nested inside that .card */
@scope (.card) to (.card) {
.title {
color: var(--accent);
}
}How it works
Both cards share the same .title class. Turn the toggle off and a plain .card .title colours the outer heading, then carries straight on into the nested card, because nothing stops it.
Turn it on and the same rule becomes @scope (.card) to (.card): style the nearest .card’s subtree, stop as soon as another .card turns up inside it. That “donut scope”, an upper bound and a lower one, is what makes components safe to nest without a uniquely prefixed class name on every last one.
turns, wins and reset, all CSS
trigonometry, in CSS
switch guests on