The @scope Rule Explained

The Problem: Descendant Selectors Reach Too Far

A normal descendant selector like .card p matches every paragraph anywhere inside a card - including paragraphs that belong to a completely different nested component placed inside that card by accident, which the original author never intended to style.

Defining a Scoped Style Block

@scope (.card) {
  p {
    color: #444444;
  }
}

Styles inside this @scope block only apply to elements matched within .card, without needing to repeat .card in front of every single selector inside the block.

Limiting How Deep a Scope Reaches

@scope (.card) to (.card-footer) {
  p {
    color: #444444;
  }
}

The to clause sets a lower boundary: styles apply to matching elements inside .card, but stop applying once a .card-footer boundary is reached - useful for preventing a component's internal styles from leaking into a nested sub-component that happens to also contain a paragraph.

How This Differs from Ordinary Nesting

Native CSS nesting (covered elsewhere in this section) still produces a normal descendant selector under the hood, which can match arbitrarily deep. @scope is specifically about establishing a boundary that unintended, deeply nested matches cannot cross.

Why This Matters for Component-Based Design

As components get nested inside other components more often, unscoped descendant selectors become an increasingly common source of accidental style leakage. @scope gives a native way to keep a component's internal styling genuinely contained, similar in spirit to what CSS Modules achieve through build tooling, but without needing a build step at all.