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

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

具体代码:

HTML:

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

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

<style lang =" less " scoped >

. test {

background: lightblue ;

color: green ;

.new {

color: red ;

</style>

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，此方法为交流讨论得出)