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

Question

So, I\'ve read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside o

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

Use ::v-deep

The accepted answer wasn't working for me in scoped SASS/SCSS, but ::v-deep did:

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

If you're not using SASS/SCSS, use the >>> syntax:

>>> .child-class {
    background-color: #000;
}

With either ::v-deep or >>>, the <style> tag for this component must be scoped:

<style scoped>

EDIT (10/1/2019): Extra info :

• The /deep/ syntax is being deprecated
• sass and dart-sass do not support /deep/, only node-sass does
• Vuetify 2 does not support /deep/ (since it does not support node-sass)

Answer 5

For me, the only thing that worked was

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