Vue.js中如何渲染带class的加载HTML文本及样式不生效问题

这是Vue scoped样式的默认特性导致的：

• 当<style>标签添加scoped属性时，Vue会为当前组件所有原生DOM元素自动添加唯一的自定义属性（格式类似data-v-xxxxxx），同时编译后的CSS选择器也会自动拼接对应的属性选择器，确保样式只作用于当前组件的元素。
• 通过v-html插入的动态HTML属于外部传入内容，Vue不会为这部分DOM自动添加对应的自定义属性，你写的.main-color编译后会变成.main-color[data-v-xxxxxx]，无法匹配到没有该属性的动态插入span元素，因此样式不生效。

你可以选择以下任意一种方法修复：

1. 将目标样式写在全局非scoped的style标签中

/* 单独声明一个不带scoped属性的style块 */
<style>
.main-color  {
  color: #ff00ff;
}
</style>

注意全局样式需要做好类名隔离，避免和其他组件样式冲突。

2. 使用深度选择器穿透scoped限制
   如果不想把样式提为全局，可以在当前组件的scoped样式中用深度选择器修饰目标类：

• Vue2原生CSS写法：

<style scoped>
>>> .main-color  {
  color: #ff00ff;
}
</style>

• Vue3 / 用Less/Sass等预处理器的写法：

<style scoped lang="scss">
:deep(.main-color)  {
  color: #ff00ff;
}
</style>

深度选择器会告诉Vue不要给后续的选择器添加自定义属性后缀，就能正常匹配到动态插入的DOM元素了。

内容的提问来源于stack exchange，提问作者bluelemonade