记一次vue使用innerHTML更新dom出现的样式失效问题

场景说明：我在实现对html拼接后重新渲染到页面的功能遇到了一点问题，当然实际的业务逻辑并没有这么简单，所以只提出这个问题，而不讨论如何修正；

具体情况：使用refs获取到dom，然后使用innerHTML来更改内容，内容为 html，其样式早已在style中写好，并且使用scoped限制作用域；但是在更改后的内容的样式却并未生效;

具体代码:

　　HTML:

　　　　<div class="test" ref="test">

　　　　　　<p>这是原始内容，颜色为绿色</p>

　　　　</div>

　　CSS:

　　　　<style lang="less" scoped>

　　　　　　.test{

　　　　　　　　　background:lightblue;

　　　　　　　　　p{

　　　　　　　　　　color:green;

　　　　　　　　　　}

　　　　　　　　　 .new{

　　　　　　　　　　color:red;

　　　　　　　　　　}

　　　　　　　　}

　　　　　　</style>

　　JS:

　　　　mounted(){

　　　　　　this.$nextTick(()=>{

　　　　　　　　this.$refs.test.innerHTML + = "<div class='new' >这是新的内容，样式为红色</div>";

　　　　　　})

　　　　}

　　

　　

　　即使style中提前写好了.new的样式，但是在页面渲染后，类名有，但是样式没有，除非在全局写它的样式，但是这会造成污染，毕竟这只是一个组件，天知道会不会和其他哪个组件的类名重复

问题排查: 经过反复排查，原因在于css编译完成后类名后会有随机码做唯一标识，这就导致了拼接的html中的类名与编译后的类名不同，也就无法生效了，如 编译后的类名为:  .new[data-v-36671fc34]，而拼接的是.new类名

解决思路:　　1.如果有条件，可以将拼接的类样式写在全局中去，当然这样可能造成污染

　　　　　　2. 在组件内编写样式(不要使用scoped)，使用多层结构精准的定位到该元素，使其样式不会对全局造成污染

　　　　　　3. 使用sass语法 >>> 进行穿透　　(本小白不会sass，此方法为交流讨论得出)