Scoped styles without BEM naming
To avoid leaks you used BEM, CSS Modules, or styled-components. @scope limits selectors to a root and optional boundary so you can use short names safely.
2 .title {
3 font-size: 1.25rem;
4 margin-bottom: 0.5rem;
5 }
6 .body { color: #444; }
7}
8/* HTML: class="card", class="title" */
2.card__title {
3 font-size: 1.25rem;
4 margin-bottom: 0.5rem;
5}
6.card__body { color: #444; }
7/* HTML: class="card__title" */
@scope Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Short names
Use .title and .body. They only apply inside the scoped root, so no collisions.
No build
No CSS Modules hash or styled-components runtime. Plain CSS, native in the browser.
Boundary
Optional to (.root) to (.boundary) so inner components don't get styled by outer scope.
How it works
Global CSS meant long class names (BEM like .card__title) or a system that generated unique names (CSS Modules, styled-components). The goal was to avoid one component's .title affecting another.
@scope (.card) { .title { … } } makes .title only match elements inside a .card. You can use simple class names and keep styles local. Add a boundary with @scope (.panel) to (.slot) so the scope doesn't cross into nested components that should stay independent.