最近在做一个项目，是对富文本编辑器生成的 HTML 渲染到页面中，大家都会想到当然是用 Vue 的 v-html 属性，于是我写下了这样的代码
<template><div class="content-html" v-html="article.contentHtml" />
</template> <style lang="scss" scoped>
.content-html {p {font-size: 16px;}a {color: blue;}}
</style>然而 style 并没有生效
解决方法 一
去掉 <style> 标签中的 scoped，但是这个方法并不建议，取消了 scoped 属性，就会污染全局变量，可能导致不可预估的后果
如何 fix 呢 ？ 官方给出了两个解决方法
In single-file components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue’s template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global <style> element with a manual scoping strategy such as BEM.在单文件组件中，带有 scoped 属性的 styles 不会作用于 v-html 里的内容，因为 v-html 里面的内容，并没有经过 Vue's template compiler 的处理。
官方建议的解决方法一，css module 是一个解决全局变量和代码依赖的规范，原理是对声明了 module 的样式表中的样式赋予哈希 class 名，可以参考 官网 或 阮一峰老师的文章
官方建议的解决方法二，意思是在全局变量中，通过特殊命名 (比如 BEM) 来手动约束样式 - BEM书写规范
可惜以上都不是我想要的解决办法，最终我在 Stack Overflow 中找到了另一种解决思路
另一种解决思路
可以使用deep scoped来实现对v-html的样式应用，并且不设置为全局deep 选择器在 CSS 的写法是 >>>
<template><div class="content-html" v-html="article.contentHtml" />
</template> <style scoped>
.content-html {>>> p {font-size: 16px;}>>> a {color: blue;}}
</style>可惜 >>> 在 sass/less 中不作用
我们需要用 /deep/ 来代替 >>> 写法
<style lang="scss" scoped>
.content-html {/deep/ p {font-size: 16px;}/deep/ a {color: blue;}}
</style>如果没解决问题？
由于我的项目需要后端渲染，我使用了 nuxt.js 框架，不知道什么原因，>>> 和 /deep/ 都不起作用
最后的救命稻草 ::v-deep
<style lang="scss" scoped>
.content-html {::v-deep p {font-size: 16px;}::v-deep a {color: blue;}}
</style>这样一来，这些样式就会影响到该组件的子组件，v-html 中的内容也因此而改变，但又不会 污染 全局
)
)
