vue-cli里scoped:

style的scoped:

demo

  <template>
         <div class="test"></div>
    </template>
    <script>
        let a=document.querySelector('.a');
        let newDom=document.createElement("div"); // 创建dom
        newDom.setAttribute("class","b" ); // 添加样式
        a.appendChild(newDom); // 插入dom
    </script>
    <style scoped>
    .a{
       background:blue;
        height:100px;
        width:100px;
    }
    .b{
        background:red;
        height:100px;
        width:100px;
    }
    </style>

// a生效   b 不生效
<div data-v-1b971ada class="a"><div class="b"></div></div>
.a[data-v-1b971ada]{ // 注意data-v-1b971ada
    background:blue;
    height:100px;
    width:100px;
}

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
它会为组件中所有的标签和class样式添加一个scoped标识，就像上面结果中的data-v-1b971ada。
所以原因就很清楚了：因为动态添加的dom没有scoped添加的标识，没有跟testAdd的样式匹配起来，导致样式失效。

解决方式
去掉该组件的scoped