Vue-loader: v-html doesn't work with scoped CSS

Created on 25 Sep 2016  路  8Comments  路  Source: vuejs/vue-loader

Ran into an issue where I'm binding html into a component template and that html doesn't inherit the scoped CSS attributes. Is this unexpected behavior?

picture BrainBacon

Most helpful comment

I just ran into this too.

Naturally fixed by removing the scope. But you can solve this using multiple <style> tags. Most of your (S)CSS would go in <style lang="scss" scoped> and then the styles specific to v-html that cannot be scoped can go in <style lang="scss">.

picture dlgoodchild on 7 Nov 2017
👍12 🎉2

All 8 comments

This is expected behavior, because v-html content isn't created by Vue's rendering system (it's just innerHTML). You will have to style v-html content with descendent selectors.

yyx990803 picture yyx990803 on 25 Sep 2016
👍4

I just ran into this too.

Naturally fixed by removing the scope. But you can solve this using multiple <style> tags. Most of your (S)CSS would go in <style lang="scss" scoped> and then the styles specific to v-html that cannot be scoped can go in <style lang="scss">.

dlgoodchild picture dlgoodchild on 7 Nov 2017
👍12 🎉2

Is there a better solution to this issue? I would really like to scope my styles for the content of my v-html tags to the .vue file they are being used in. Currently I only know to put all my article styles in my app.vie file, of which the css is getting really long. Is there an alternative to v-html for rich text? Or maybe CSS modules could help with this? Could I also alter vuejs so that scoping could be applied by Vue to all content inside v-html in a scoped component? Just looking to find a nice solution to this issue.

rchrdnsh picture rchrdnsh on 29 Jun 2018

@rchrdnsh there is a new feature started from vue-loaded v12.2.0