Selectors and the cascade

@scope

Newly availablesince Mar 2026

Replaces: BEM-length class names invented to stop styles leaking. A rule applies from one element down to a boundary you name, and no further.

See it working

I am in the card, so I am styled.

I am inside the slot. The scope stopped before it reached me.

The syntax

@scope (.card) to (.card-slot) {
  p { color: var(--muted); }   /* stops at the slot */
}

The demo’s full CSS

@scope (.dm-scope) to (.dm-scope-slot) {
  p { color: #4f46e5; font-weight: 700; }
}
.dm-scope { padding: 14px; border-radius: 10px; background: #fff; border: 1px solid #dfe2ea; }
.dm-scope p { margin: 0; font-size: 14px; line-height: 1.5; }
.dm-scope-slot { margin-top: 10px; padding: 12px; border-radius: 8px; background: #f3f4f8; }

For browsers without it

Give the scoped elements a usable default colour outside the @scope block. A browser without @scope ignores the block and both paragraphs above read the same, which is plain but correct.