Vue.js style v-html with scoped css

user_2671578 0
Viewed 13665

How can I style v-html content with scoped css using vue-loader?

Simple example: component.vue

<template>
  <div class="icon" v-html="icon"></icon>
</template>
<script>
  export default {
    data () {
      return {icon: '<svg>...</svg>'}
    }
  }
</script>
<style scoped>
  .icon svg {
    fill: red;
  }
</style>

generate html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div>

generate css .info svg[data-v-9b8ff292] { fill: red; }

As you can see v-html content don't have data-v attribute, but generate css have data-v attribute for svg.

I know this is expected behavior for vue-loader (https://github.com/vuejs/vue-loader/issues/359). And in this issue descendent selectors mentioned. But as you can see I use it in my css and it's not worked.

How can I style v-html content?

vue-loader vue.js
4 Answers

I am using vue-loader 15.9.1. The >>> solution did not work for me (no effect) whereas the /deep/method resulted in building errors...

Here is what worked instead:

.foo ::v-deep .bar { color: red; }

user_92761370

AS Sarumanatee said if the accepted answer doesn't work try: 

.foo /deep/ .bar { color: red; }
user_20450790

Using /deep/ selector with SCSS didn't work for me but then I tried using ::v-deep selector

e.g

::v-deep a {
  color: red;
}

See this answer

user_65463220
Related