Vue.js v-html style with css scope
How can I generate 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>
create html
<div data-v-9b8ff292="" class="icon"><svg>...</svg></div>
Create css
.info svg[data-v-9b8ff292] { fill: red; }
As you can see, the v-html content does not have a data-v attribute, but the generate css has a data-v attribute for svg.
I know this is the expected behavior for vue-loader ( https://github.com/vuejs/vue-loader/issues/359 ). And this question mentioned the descendant selector. But as you can see, I am using it in my CSS and it didn't work.
How can I create v-html content?
source to share
The new version vue-loader
(from version 12.2.0) allows deep scoping css. You should use it this way:
<style scoped>
now support deep selectors, which can affect components using a combinator>>>
:
.foo >>> .bar { color: red; }
will compile to:
.foo[data-v-xxxxxxx] .bar { color: red; }
More information on the release page vue-loader
source to share