如何使用vue loader使用限定范围的css设置v-html内容的样式?
简单的例子:
<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>
生成html
生成css
正如您所见,v-html内容没有data-v属性,但生成的css具有svg的data-v属性.
我知道这是vue loader(https://github.com/vuejs/vue-loader/issues/359)的预期行为.在本期中,我们提到了后代 Select 器.但正如你所见,我在css中使用了它,但它不起作用.
如何设置v-html内容的样式?