vue.js html loader,vue loader - Vue.js style v-html with scoped css - Stack Overflow

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

Simple example:

component.vue

export default {

data () {

return {icon: '...'}

}

}

.icon svg {

fill: red;

}

generate html

...

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?