CSS @scope: bound a component rule to a subtree

How the rule works

A case review panel contains a nested audit panel that reuses a heading class. The outer panel may style its own section headings while leaving the nested audit panel alone. Define the review root and the audit limit, then write the scoped rule against headings within that boundary. Scope is a cascade input, not a substitute for naming states or maintaining a sensible layer order. When origin, importance, layer, and specificity tie, proximity to the scope root can determine which scoped declaration wins. Since compatibility depends on the user's browser set, supply a basic class-based style first so older clients retain a readable panel. Inspect both the outer and nested headings after the change.

.review-panel :where(.section-title) { color: #254760; }
@scope (.review-panel) to (.audit-panel) {
  .section-title { color: #175b44; }
}

Cost and verification

The fallback still styles headings in the review panel, including nested ones; the scoped enhancement changes the intended outer headings where the feature is supported. If isolation of the nested audit heading is required for older browsers too, use explicit component classes in the fallback. Scope adds no asset request. Its maintenance cost is the need to reason about where nested boundaries begin and end, especially when a component moves in the DOM. Verify actual supported clients rather than using a single desktop browser as the compatibility policy.

Common Mistakes

• Do not confuse @scope with Shadow DOM isolation.
• Do not assume a limit selector removes styles already supplied by the fallback.
• Do not treat scoping proximity as a replacement for cascade layers.

Connected lessons

• CSS Foundations
• CSS cascade layers: set precedence before selectors grow
• Native CSS nesting: group states without raising specificity by accident
• CSS combinators: select relationships without encoding every wrapper

Related component decisions

• CSS :host: make a component variant an explicit host contract