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

ghz 1years ago ⋅ 5885 views

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

Vue 2.0 - 2.6

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 (and Vue 2.7)

In Vue 3, the ::v- prefix is now [deprecated](https://v3.vuejs.org/api/sfc- style.html#deep-selectors) 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](https://v3.vuejs.org/api/sfc- style.html#slotted-selectors) 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](https://v3.vuejs.org/api/sfc- style.html#global-selectors) 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>
#vue.js