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

In Vue 3, we no longer need >>> and can use the unified ::v-deep selector whether using Sass or not, but now it's recommended to use parentheses with the selector.

Use ::v-deep(.child-class)

::v-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 syntax for components with a <slot> that enables styling passed slot content.

Slot content   Use ::v-slotted(.child-class)

::v-slotted(.slot-class) {    background-color: #000;}

And lastly, in Vue 3, there is a new syntax to register global styles even from a scoped component:

Global styles   Use ::v-global(.my-class)

::v-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 ::v-deep(.child-class)
• The >>> syntax is deprecated
• The /deep/ syntax is deprecated
• There are new ::v-slotted and ::v-global selectors

With every version/syntax, the <style> tag for this component must be scoped:

<style scoped>

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

Any scoped component's css can be changed by using deep selectorbut 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>

I've successfully used /deep/ in Vue's scoped SCSS stylesheets with this structure:

.parent-class {  & /deep/ .child-class {    background-color: #000;  }}

Edit: /deep/ is being deprecated, if it no longer works for you please refer to the other answer that explains ::v-deep