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...
The ::ng-deep CSS selector is often used in an Angular Component's CSS to override the styles of a third-party component or a child component's styles.
Vue lets you pass styles down to child components using "deep selectors". These selectors can look like this: <style scoped> div >>> div. in-child-component { // some styles } // alternate syntax for use with less/sass parsers div::v-deep div.
With scoped , the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
Adding CSS classes in Vue We should apply the button CSS classes to the <button> in our ToDoForm component. Since Vue templates are valid HTML, this is done in the same way to how you might do it in plain HTML — by adding a class="" attribute to the element.
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>
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; }
You can also still use any of the deprecated syntaxes if you prefer.
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>
In Vue 2:
/deep/
syntax is deprecated::v-deep
with Sass, use >>>
without SassIn Vue 3:
::v-deep .child-class
is deprecated in favor of :deep(.child-class)
::v-
prefix is deprecated in favor of :
>>>
syntax is deprecated/deep/
syntax is deprecated:slotted
and :global
selectorsWith every version/syntax, the <style>
tag for this component must be scoped
:
<style scoped>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With