let fatherDom = document.getElementById("fatherDomId");
let newDom = document.createElement("div");
newDom.style.left = "190px";
newDom.style.top = "190px";
newDom.className = "circle"; //能看到类名解析但是样式没加载
1.Vue组件中样式Style中scoped导致样式局部生效,因为采用scoped每个类渲染后会有一个单独的data-v-xxxx编码格式,防止样式污染,去除即可。
2.使用样式穿透,跳过scoped,这样就不用去除scoped造成全局样式污染。Vue2使用/deep/ className,Vue3使用:deep(className),此外还有>>>。
3.可能是类的优先级,在子类前加上父类,这里时动态创建的类,所以使用了也没效果。
4.重新创建一个CSS/SCSS样式文件,然后在Vue组件中引用该文件即可,将不生效的样式都放在该样式文件中,不需要再去除scoped和deep。