Vue 中 v-html 无法被 style scoped 渲染的问题

假设有这么一个 vue 组件：

<template>
   <div v-html="docPreview"/>
</template>
<style src="style.css" scoped>

</style>

这样来说，div 内的 html 的元素并不会受到 css 的影响。

原因很简单，scoped 的原理是将 template 内所有元素添加一个随机数属性（审查元素可以看到，叫做v-data-xxxxxxx），然后又把 css 里面的选择器也加上这个属性，保证元素只作用到属性上。但是 v-html 里的元素没有加上这个标签，自然不会受到影响。

怎么解决呢？首先可以直接取消 scoped，不过这样 css 也就会影响到全局了。如果不这么做的话，那就必须修改 css。

其中一种修改的办法是采用“deep选择器”。比如：

>>> p {
  font-size: 16px; /* 一般写法 */
}
>>> p {
  font-size: 16px; /* sass/less 写法 */
}

这样的话，对应的“p”就不会加上属性，可以应用到子元素。