Scoping with @scope

Scope & @scope

Limit styles to a subtree without fighting specificity with long selectors.

The basic idea

@scope (.card) {
  p { color: #333; }      /* only <p> inside .card */
}

Same as .card p but much cleaner for components.

Lower bound / upper bound

@scope (.card) to (.card-body) {
  color: #222;   /* within .card but not inside .card-body */
}

:scope root

@scope (.list) {
  :scope > li { border-top: 1px solid #ddd; }
}

:scope refers to the scope ROOT itself (.list).

Why @scope matters

• Confines selectors (lower impact).
• Stops rules leaking into nested widgets.
• Cleaner than combinator-heavy selectors.

TL;DR

• @scope (.card) { ... } scopes to a subtree.
• to (...) sets an upper bound.
• :scope = the scope root.
• Great for component libraries and design systems.