v-html doesn't work with scoped CSS

[BrainBacon]

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?

[yyx990803]

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.

[dlgoodchild]

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">.

[rchrdnsh]

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.

[huangxuewu]

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

<style scoped> now support "deep" selectors that can affect child components using the >>> combinator:

[Skura23]

According to vue-loader v12.2.1, if you are using sass, you should use /deep/ instead. Like this, .markDiv /deep/ h1,h2,h3,h4,h5,h6{...}

[Kinzi]

For SCSS use:

.content {
	/deep/ p {
		margin: 0 0 1rem 0;
	}

	/deep/ ul {
		margin: 0 0 1rem 0;
	}
}

[ayoubkhan558-zz]

Try this :)

<div class="content" v-html="content"></div>

.content ::v-deep {
  h2 {
    color: blue;
  }
  a {
    color: blue;
  }
}