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 (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>

---

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>

---

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

---

Though it is not found in the Documentation, the answer is that the component you are attempting to reach cannot be the root component. Wrap your single component in a <div> and it should work using ::v-deep on scoped scss as others have explained.

---

For me, the only thing that worked was

<style scoped>.  // sass and scss didn't work
  >>> .deep-selector {
    ...
  }
</style>

---

::v-deep usage as a combinator has been deprecated. Use :deep() instead.

:deep(.child-class) {
    background-color: #000;
}

---

I solved this problem by adding

options: { styleIsolation: 'shared' }, // add this methods: { yourFunc1 () { } } .pet-info{ ::v-deep .title { width: 51px !important; background-color: red !important } }

Config this in the components like the methods, it's the same level like methods.

---