场景说明：我在实现对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的样式，但是在页面渲染后，类名有，但是样式没有，除非在全局写它的样式，但是这会造成污染，毕竟这只是一个组件，天知道会不会和其他哪个组件的类名重复
猜测问题出在innerHTML更改dom时，但是具体的情况本小白还是丈二和尚摸不着头脑，如果你知道原因，或者有什么想法，求求你告诉我！这坑踩得我怀疑人生啊！