How do I use /deep/ or >>> or ::v-deep in Vue.js?

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 (and Vue 2.7)

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;
}

^{This also works in Vue 2.7 (final Vue 2 release)}

---

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>