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.card__title {
3 font-size: 1.25rem;
4 margin-bottom: 0.5rem;
5}
6.card__body { color: #444; }
7/* HTML: class="card__title" */
2 .title {
3 font-size: 1.25rem;
4 margin-bottom: 0.5rem;
5 }
6 .body { color: #444; }
7}
8/* HTML: class="card", class="title" */
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.