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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。