Deep Selectors
The :deep()
CSS pseudo-class can be used if you want styles to apply to some "deeply" nested child components:
1<style scoped>
2.a :deep(.b) {
3 /* ... */
4}
5</style>
Vue will compile this code into:
1.a[data-v-f3f3eg9] .b {
2 /* ... */
3}
Info
DOM content created with v-html is not affected by scoped styles, but you can still style them using deep selectors.
Slotted Selectors
By default, scoped styles do not affect contents rendered by <slot/>
but we can use the :slotted
pseudo-selector to apply styles to slot content:
1<style scoped>
2:slotted(div) {
3 color: red;
4}
5</style>
Global Selectors
The :global
pseudo-class can be used to globally apply a rule, even within the <style scoped>
block:
1<style scoped>
2:global(.red) {
3 color: red;
4}
5</style>
To be more specific, I recommend adding a second <style>
block if you need to apply multiple global styles:
1<style scoped>
2:global(.red) {
3 color: red;
4}
5</style>
6
7<style>
8body {
9 margin: 0;
10 padding: 0;
11}
12</style>
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Use Optional Chaining in Templates
It's possible to use optional chaining in Vue templates.
Vue Tip: Use Vuex in Vue Router Navigation Guards
It's possible to use Vuex state to determine if a user is allowed to visit certain Vue Router routes.