一、前言
很多时候我都需要通过动态生成html标签，然后让vue3去渲染。
而vue3就有一个v-html指令，它的作用就是将html标签字符串渲染为html标签。
可一旦使用了这个v-html指令，就会立即出现样式问题，因为v-html指令渲染的标签没有经过vue3的解释器，会导致我们的样式无法正常作用在标签之上。
比如：
可以看到，此时虽然v-html指令已经能成功渲染字符串为标签了，但下面的样式却是无效的。
二、解决方法
出现这个的原因就是前面提到过的，由于通过v-html指令渲染的标签没有经过vue3的解释器，也就是完全纯正的原始标签。
而这里style标签我们都会习惯上的写上scoped，其意思是限制样式只作用于本组件内部，其实现的方法就是为本组件所有的标签都添加一个序列号：
但由于v-html没有为其添加序列号，则被认为不是本组件的标签，也就自然无法被应用样式了。
想要解决这个问题，最简单的方法就是去除掉scoped。
但这又会导致其写的样式会作用于全局，可能扰乱其它组件的样式，所以我个人并不推荐。
最好的方式其实是使用官方给出的指令:deep()。
使用方法如下：
只需要用它将我们想要使用的选择器包裹起来，那么它就会不再理会组件样式封装问题，直接将这个样式透传到内部。
这样使用的好处就是我们的样式依旧只会作用于本组件，唯一的坏处可能就是，如果你在该组件内部继续使用子组件，那么这样使用可能就会导致影响子组件的样式。
