@scope for Scoped Styles

The @scope at-rule (Chrome 118+, Safari 17.4+) limits CSS rules to a specific subtree of the DOM. Rules inside @scope only apply to elements within the declared scope root, preventing style leakage across components.

Declare a scope with a scope root selector. All rules inside apply only to descendants of matching scope roots — not to the entire document.

The scope root (@scope (.card)) defines the entry point. Elements inside the scope that match .title are styled. Elements outside .card with class .title are unaffected — true style encapsulation without Shadow DOM.

Optionally define a scope boundary with to: @scope (.card) to (.nested-card). Rules apply inside .card but stop at .nested-card descendants — scoping styles to one level of component nesting, excluding deeper instances.

Inside an @scope block, :scope refers to the scope root element itself. @scope (.card) { :scope { border-radius: 8px; } } styles the .card element directly, not its descendants.

@scope introduces proximity-based specificity: when multiple scopes match an element, the nearest ancestor scope root wins — regardless of selector specificity. This prevents deeply nested component styles from being overridden by styles from distant ancestor scopes.

CSS Modules generate unique hashed class names to achieve scope at build time — a JavaScript-bundler concern. @scope achieves scope natively in the browser without build tools, hashed names, or framework-specific syntax — pure CSS.

Shadow DOM creates complete style isolation — external styles cannot penetrate. @scope creates partial isolation — styles from outside can still reach scoped elements if their specificity is high enough. @scope is a lighter-weight alternative for component scoping without full isolation.

Combine @scope with @layer for fine-grained cascade control: define component-scoped styles in a component layer. This manages both cascade order (via layers) and style scope (via @scope) in a composable way without class naming gymnastics.

Design system components: scope all button styles to @scope (.button-group) so inner button styles never leak out. Widget isolation: scope a third-party widget's styles to its container, preventing conflicts with the page's global styles.

@scope is supported in Chrome 118+, Safari 17.4+, Firefox 128+. For unsupported browsers, styles inside @scope are ignored — the cascade falls back to global styles. Use @scope as progressive enhancement where component scoping is beneficial but not critical.

What problem does @scope solve that is difficult to address with traditional CSS selectors alone?

@scope limits CSS rule application to a declared DOM subtree, enabling native style encapsulation without Shadow DOM or build-tool class hashing. Scope limits, proximity specificity, and integration with @layer make it a powerful primitive for component-scoped design systems in pure CSS.