CSS @scope: Component Styles Without CSS Modules

For two decades, scoping CSS to a component meant reaching for tooling: CSS Modules, CSS-in-JS, BEM naming conventions, Shadow DOM, or framework-specific scoped attributes. As of February 2026, every modern browser supports @scope natively. Firefox 146 was the last to ship it, which means @scope is now Baseline: Newly Available — safe to use in production without a polyfill.

@scope lets you write CSS that only applies to a specific subtree of the DOM. No build step. No naming conventions. No JavaScript runtime. In this guide you will build a real card component, isolate its styles with @scope, then layer in a donut scope to keep slot content untouched. By the end you will know exactly when to reach for @scope and when to keep using CSS Modules.