Scoped styles don't apply to v-html injections #749
Comments
|
Prefixing is simply different from what scoped CSS does. The HTML injected is raw and we are likely not going to change this. You can just give the container element a class and use nested selectors to style the raw HTML. |
|
There still has a problem.
template:
script:
scss:
Omit some unrelated code. it's style not work till remove 'scope' in style tag. Should I remove 'scope' in style tag or remove '<i>' in isFocusText? Whether I style element in raw html? |
|
You could use something like |
|
You can use the |
|
|
|
I stumbled upon this today and oddly, nothing was working (unscoped css, global css). I noticed that while this solution worked, the I then found this: https://medium.com/@brockreece/scoped-styles-with-v-html-c0f6d2dc5d8e Which recommends something along the lines of: Which works as well, without a deprecated selector. edit: Then again, the vue docs say |
|
Since the discussion is still going on, I just wanted to draw attention to my comment above about using the root element's selector to scope your styles. It can produce simpler, more predictable style behaviors and doesn't muddy up the DOM with the extra scope attributes. You just have to be aware of how one component's styles might affect its child components. I use the |
|
Yes I totally agree - something very weird was happening where even unscoped Styling in the component and even the global Stylesheet was not working - and only the deep selector worked - in the end it turned out webpack was hung up on something and restarting it fixed everything. I agree I would aim for a root selector instead as well and switched things over when it worked again. |
wow! |
|
I am using
|
not working with with scss |
In my case, with /deep/ &-icon {
// See: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
font-size: 30px;
} |
|
Not sure if I missed it, but would be great to put a mention in the Docs about this not working (might save some churn for other noobs like myself :-) ) |
|
|
/deep/ is not working in Vue@2.6.12 use ::v-deep instead. |
|
Try this :) <div class="content" v-html="content"></div>.content ::v-deep {
h2 {
color: blue;
}
a {
color: blue;
}
} |
Any one still having this issue sould use this comment and not deep because as the user said it is deprecated. thanks a lot |
|
Update!!!!!!!!
|
|
How do I use /deep/ or >>> or ::v-deep in Vue.js? To add styles to child components from the parent component...In Vue 2:
<style scoped>
.parent-component {
::v-deep {
.child-component {
background-color: #000000;
p {
color: #ffffff;
}
}
}
}
</style>In Vue 3:
<style scoped>
.parent-component {
:deep {
(.child-component) {
background-color: #000000;
p {
color: #ffffff;
}
}
}
}
</style>Also in Vue 3 you can use 2 new selectors:
<style scoped>
.parent-component {
:global {
p {
color: #000000;
}
(.my-class) {
background-color: #000000;
p {
color: #ffffff;
}
}
}
:slotted {
(.slot-child-component) {
background-color: #000000;
p {
color: #ffffff;
}
}
}
}
</style> |
|
Would it be a good idea to add this to the documentation? |
Uh oh!
There was an error while loading. Please reload this page.
Version
11.0.0
Reproduction link
https://github.com/foundryspatial-duncan/vue-loader-issue-demo/blob/master/src/App.vue
Steps to reproduce
scopedproperty on thestyletag).What is expected?
The styles would affect the injected HTML
What is actually happening?
The styles do not affect the injected HTML
Looks like HTML injected with v-html aren't given the "data-v-[hash]" property (like data-v-08ce5946).
I think there's a proposal somewhere to only add the data-v-[hash] to the component's root element and then prefix all the styles to scope them. That would solve this issue as well.
The text was updated successfully, but these errors were encountered: