Vue.js style v-html with scoped css

Question

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?

Answer 1

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; }