相关疑难解决方法(0)

如何使用vue-loader使用范围限定的CSS为v-html内容设置样式？

简单示例：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>

产生HTML <div data-v-9b8ff292="" class="icon"><svg>...</svg></div>

生成CSS .info svg[data-v-9b8ff292] { fill: red; }

如您所见，v-html内容没有data-v属性，但是生成css具有svg的data-v属性。

我知道这是vue-loader的预期行为（https://github.com/vuejs/vue-loader/issues/359）。并在本期中提到了后代选择器。但是如您所见，我在CSS中使用了它，但是它没有用。

如何为v-html内容设置样式？

我想将样式添加到v-html. 我尝试了几种解决方案，但没有任何功能:(

这是我的代码：

模板 ：

<div
  class="para"
  v-html="value" 
/>

脚本 ：

export default {
  data () {
    return {
      value : "<h2> TITLE </h2> <p> PARA </p>"
    }
  },
}

风格 ：

.para >>> h2 {
  color: blue;
}

.para >>> p {
  color: red;
}

提前致谢 ！