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

Avoid using /deep/ and instead use ::v-deep

Any scoped component's css can be changed by using deep selector but sooner /deep/ will get deprecated

Vue Github reference - https://github.com/vuejs/vue-loader/issues/913

Use ::v-deep in this case,and avoid deprecated /deep/

Reference - Deep Selector

Just inspect class of the rendered element which you want to modify using devtools in chrome or any browser console.

Then, In you consuming component, modify it

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>

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

^{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>