vue scoped解析

不加scoped


加上scoped


从上面的图可以看出，给style加上scoped之后，会给这个模块的所有元素都加上一个自定义属性data-v-xxxx，这个xxxx就是这个文件的相对路径加上文件名生成的hash值，这样就能保证自定义属性独一无二
给所有元素加上自定义属于以后，会给每个类名后面都加上这个属性选择器，因为自定义属性是独一无二的，所以就实现了样式隔绝

现在再来研究一下使用element-plus修改样式的问题

这是给拉下选择框修改样式，但是这样写并不能失效


从上面的图可以看出，因为开始了scoped，会给所有的类目加上自定义属性，但是呢，因为使用的是第三方库element-plus的组件，所以并没有给el-select组件加上自定义属性，所以写的样式根本就选不中，因此vue3提供了::v-deep()方法

 ::v-deep(.el-select__wrapper) {
    background-color: rgba(1, 23, 42, 0.8);
    box-shadow: 0 0 0 1px rgba(8, 67, 114, 0.5) inset;
  }

可以看出，使用了::v-deep()之后，就不会给当前类目加自定义属性了，而是给上一级加，这样就能正常选中了