The @scope at-rule introduces a localized styling boundary inside a style sheet so that the selectors it contains apply only within a well-defined region of the document. Instead of changing how selectors themselves work, it establishes one or more scope roots and causes selector matching inside the block to be evaluated relative to those roots. That makes it possible to write rules that are semantically local to a component or area of the page without altering selector specificity or the fundamentals of the cascade.

Because @scope limits where selectors take effect, it is especially useful for component-driven development and large codebases where style leakage and accidental overrides are common problems. Designers and developers can reuse generic class names in different scoped contexts without collisions, and teams can reason about the reach of a rule without tracing the entire DOM. The at-rule therefore helps with maintainability and predictable composition of styles: scoped rules behave like ordinary author rules within their local region, but they do not affect elements outside that region.

Using @scope does not create a shadow DOM: it does not change the DOM tree, alter event propagation, or enforce DOM-level encapsulation. Inheritance of CSS properties still follows the normal DOM relationships, and specificity and cascade rules remain in force for any matched declarations. What changes is only the domain of matching — the set of elements against which selectors are tested — so scoped styles coexist with global styles and Shadow DOM styles but serve as an author-level mechanism for containment and modularity.

Scopes can be composed and nested, allowing designers to express hierarchies of containment and progressively restrict the reach of rules. When scopes are nested, selectors are resolved with respect to the nearest applicable scope roots, which provides a predictable layering model for styling complex interfaces. This makes @scope useful both for isolating third-party widgets and for layering theme or variant rules on top of base component styles without rewriting selectors across the codebase.

@scope (<scope-start>) to (<scope-end>) {

  /* scoped CSS rules */

}

• <scope-start>A selector that identifies the top-level element where the scoping starts.
• <scope-end>(Optional): A selector that identifies where the scoping ends. Any elements matching this selector (and their descendants) are excluded from the scope.

The following information will show you the current browser support for the CSS at-rule @scope. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported by all modern browsers.

Desktop

Tablets & Mobile