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-deep
is 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
How to Reference Jsf Image Resource as CSS Background Image Url
Remove Ie10'S "Clear Field" X Button on Certain Inputs
How to Select the "Last Child" With a Specific Class Name in Css
Css Force Image Resize and Keep Aspect Ratio
Same Font Except Its Weight Seems Different on Different Browsers
How to Make Flexbox Children 100% Height of Their Parent
Difference Among Col-Lg-*, Col-Md-* and Col-Sm-* in Bootstrap
Css Triangle Custom Border Color
Difference Between Max-Device-Width and Max-Width For Mobile Web
Center Content in Responsive Bootstrap Navbar
Equal Height Rows in CSS Grid Layout
Can the :Not() Pseudo-Class Have Multiple Arguments
Add a CSS Border on Hover Without Moving the Element
Why Does the Order of Media Queries Matter in Css
How to Conditionally Apply a Class
Areas Covered by Flexbox Which Are Difficult or Impossible to Achieve With Grid