标签：vue dom 样式 节点 scoped js class css
一、问题描述
开发的时候免不了有时候需要向某个节点appendchild，添加子节点，
但是如果是在vue中，就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。
二、解决思路
通过查看原始的节点与新增的节点发现，原始节点与新增节点的class都一样，但是原始的节点在class后面还会多出data-v-XXXXXXX这个属性，
然后再去查看引入的css样式同样发现在class名后面也会多加一个[data-v-XXXXXXX]的后缀。
原因
通过测试可以发现，这是因为vue文件中的style标签添加了scoped的原因，
而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，
于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。
三、解决办法
1.去掉scoped(不推荐)
把style标签的scoped去掉即可
当然这么做的前提是你得保证当前vue文件(组件)中的样式不会出现与其他组件样式class重名，否则可能会出现样式覆盖的情况。
2.：：v-deep渗透(推荐)
完美解决！
::v-deep(#compassContent) {
height: 28px;
width: 28px;
}
标签：vue,dom,样式,节点,scoped,js,class,css 来源： https://www.cnblogs.com/echohye/p/16632541.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。