vue组件中scope失效原因

vue组件中经常使用scope来使样式只在组件内生效。原因就是attribute 会自动添加一个唯一的 attribute为组件内 CSS 指定作用域，然后使用CSS的属性选择器自动生成样式范围。

然而在使用Element或者vant这种UI库的时候，在scope的CSS内修改UI库的样式，有的时候能修改成功，有的时候会修改失败。

查看控制台，原因就是属性选择器的问题。

Vue只会在一级DOM内生成指定attribute,然而CSS都会加上属性选择。所以UI库内嵌套的标签不会生成attribute，,CSS中却使用了属性选择器，也就造成样式失效

image.png image.png