How to Use /Deep/ or ≫≫≫ or ::V-Deep in Vue.Js

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>

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

The relevant RFC is here:

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

I believe you need to change it to:

.parent ::v-deep(.child) {

Update:

The warning message mentioned in the question has been changed in later versions of Vue 3 to recommend using :deep() instead. This is an alias for ::v-deep() and it has been added to the documentation here:

https://v3.vuejs.org/api/sfc-style.html#deep-selectors

How to use ::v-deep(inner-selector) in vue?

You can try and use the >>> .class-i-want-deep{ /// } if you're not using sass/scss. Docs from vue-loader here
In terms of the error message, it says:

"*::v-deep usage as a combinator has been deprecated. Use ::v-deep() instead. (using Vue 3.0.0-beta.1)"

So it looks like your syntax for ::v-deepis here is no longer allowed in Vue 3. Try using the new ::v-deep(), I can't find the docs for that specifically.
Update: Looks like ::v-deep() usage with 3.0 is working for OP. Have not reproduced it yet.

How to use deep selector in scss in vue

From the vue docs:

"Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same."

So try this:

<style lang="scss" scoped>
.a {
/deep/ .b {
...
}
}
</style>

v::deep how to reach certain element

You can use ::v-deep .media-library-dropzone if you're using Sass (as in your case apparently) or >>> .media-library-dropzone if not.

As explained here: https://stackoverflow.com/a/55368933/8816585

CSS selectors ::v-deep, /deep/ and not working on GitHub pages, but locally they do

I kept:

::v-deep .typed {
color: #fff;
}

and made it work by removing lang="css from the style tag which looks like this now:

<style scoped>
::v-deep .typed {
color: #fff;
}
</style>


Related Topics



Leave a reply



Submit