場景說明：我在實現對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，此方法為交流討論得出)