Vue 2
The following also works in Vue 3 but is deprecated.
Sass: Use ::v-deep
::v-deep .child-class {
background-color: #000;
}
Not using Sass: Use >>>
>>> .child-class {
background-color: #000;
}
With either syntax, the <style>
tag for this component must be scoped
:
<style scoped>
Vue 3 (Updated 1/19/2022)
In Vue 3, the ::v-
prefix is now deprecated and we no longer need >>>
. We can use the unified :deep
selector whether using Sass or not, but now it’s recommended to use parentheses with the selector.
Use :deep(.child-class)
:deep(.child-class) {
background-color: #000;
}
You can also still use any of the deprecated syntaxes if you prefer.
Vue 3 new selectors
Additionally, in Vue 3, there is a new feature for components with a <slot>
that enables styling passed slot content.
Slot content Use :slotted(.child-class)
:slotted(.slot-class) {
background-color: #000;
}
And lastly, in Vue 3, there is a new feature to register global styles even from a scoped
component:
Global styles Use :global(.my-class)
:global(.my-class) {
background-color: #000;
}
With any syntax, the <style>
tag for this component must be scoped
:
<style scoped>
Summary
In Vue 2:
- The
/deep/
syntax is deprecated - Use
::v-deep
with Sass, use>>>
without Sass
In Vue 3:
::v-deep .child-class
is deprecated in favor of:deep(.child-class)
- The
::v-
prefix is deprecated in favor of:
- The
>>>
syntax is deprecated - The
/deep/
syntax is deprecated - There are new
:slotted
and:global
selectors
With every version/syntax, the <style>
tag for this component must be scoped
:
<style scoped>