22 lines
694 B
Markdown
22 lines
694 B
Markdown
|
---
|
||
|
|
'astro': minor
|
||
|
|
---
|
||
|
|
|
||
|
|
Implements a new class-based scoping strategy
|
||
|
|
|
||
|
|
This implements the [Scoping RFC](https://github.com/withastro/roadmap/pull/543), providing a way to opt in to increased style specificity for Astro component styles.
|
||
|
|
|
||
|
|
This prevents bugs where global styles override Astro component styles due to CSS ordering and the use of element selectors.
|
||
|
|
|
||
|
|
To enable class-based scoping, you can set it in your config:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { defineConfig } from 'astro/config';
|
||
|
|
|
||
|
|
export default defineConfig({
|
||
|
|
scopedStyleStrategy: 'class'
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Note that the 0-specificity `:where` pseudo-selector is still the default strategy. The intent is to change `'class'` to be the default in 3.0.
|