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 of child components. However, attempting to use this in my styles, whether in SCSS or in plain old CSS, doesn't work. Instead, they are sent to the browser verbatim, and therefore have no effect. For example:

home.vue:

<style lang="css" scoped>
    .autocomplete >>> .autocomplete-input
    {
    // ...
    }
</style>

generated css:

<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>

what I want:

<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>

My webpack configuration pertaining to vue-loader looks like this:

// ...
{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader"
        }
    }
}
// ...

So my question is, how do I get this >>> operator to work?

I've already found this answer, but I'm doing exactly that and it doesn't work...

Answer 1

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 2

Use ::v-deep

The accepted answer wasn't working for me in scoped SCSS, but this sometimes did:

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

And this usually did (omitting parent class):

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

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

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