一、scoped原理与功能：
vue文件的style标签的scoped属性作用：在元素标签上添加特殊属性值[data-v-xxx]，在样式的选择器后面添加属性选择器，实现了组件样式的私有化，防止组件之间的样式污染（比如相同类名的元素）。
在父组件的style标签中启用了scoped属性后，可以看到父组件的所有元素都添加了相同的特殊属性，同时在子组件的根元素上也有（只有子组件的根元素才有，其他没有，这里注意到子组件的p标签并没有）。.parent选择器也变成了.parent[data-v-xxx]，也就是添加了属性选择器。
二、为什么需要样式穿透：
1、引入了第三方组件库（如element-ui、element-plus），并想修改第三方组件库的样式。
2、样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除（去除scoped属性会变成全局样式对其他组件也造成影响）。
样式穿透的三种写法：
1、原生CSS样式穿透 （操作符 >>>） 外层 >>> 第三方组件{ 样式 }
.wrapper >>> .el-image { width: 100px }
2、适用于scss、less（深度选择器/deep/）
.wrapper /deep/ .el-table__body-wrapper { cursor: pointer; }
3、scss样式穿透（深度选择器::v-deep） ::v-deep 第三方组件 {样式}
::v-deep .el-table::before { background-color: transparent; }
三、实际需求：
使用第三方组件库element-ui的组件时，时常需要调整子组件内部的样式，比如在el-table中嵌套el-input，此时需要把input的默认边框和默认内边距 去除，input的选择器是el-input-inner，此时可以写为 .eltable /deep/ .el-input-inner { 样式 }，穿透成功，还能防止影响其他input
