@scope

Styles that stop at a boundary you name

Caveat@scope is not encapsulation. It limits where these rules apply and does nothing to stop rules from anywhere else reaching in — a stray p { color: red } in another sheet still wins on specificity and still paints the inner block. Reaching for it expecting shadow-DOM behaviour gets you the opposite of what you expected, quietly. The limit is also exclusive: to (.inner) leaves .inner itself outside the scope, so you cannot style the boundary element from within.

FallbackAn engine without it drops the entire block, so scoped rules simply never apply. Safe as an enhancement, unsafe as the only place a needed style lives: put the styles that must exist outside the block and use the scope for the ones that refine them.

/* from .outer, down to but not
   including .inner */
@scope (.outer) to (.inner) {
  p { color: CanvasText; }
}

/* still reaches in — @scope is not
   a wall, only a range */
p { color: red; }

Published 24 Aug 2026