/deep/的使用与导致样式失效问题处理

1、背景

【1】当 style 标签有 scoped属性时，它的 CSS 只作用于当前组件中的元素,使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式.。
【2】样式失效:最近项目用户在使用过程中发现有些样式失效了，经过排查发现是跟最近谷歌升级到89.几的版本有关。

2、深度选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符，但是有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/或::v-deep操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

<style scoped>
	.a >>> .b { /* ... */ }
</style>
或
<style scoped>
	.a /deep/ .b { /* ... */ }
</style>
或
<style scoped>
	.a ::v-deep .b { /* ... */ }
</style>

上述代码会被编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

3、关于/deep/导致浏览器样式失效问题

谷歌浏览器升级到89版本后，/deep/嵌套使用，会导致样式失效

// 局部嵌套使用(scoped)，会导致.c的样式失效
<style lang="scss" scoped>
	.a /deep/ .b {
	  ......
	  /deep/ .c {
	    ....
	  }
	}
</style>
// 全局使用(无scoped)，会导致.b的样式失效
<style lang="scss">
	.a /deep/ .b {
	  ......
	}
</style>

示例如下：

style lang="scss" scoped>
@import '../../../../styles/order/edit.scss';
/deep/ .el-collapse {
  /deep/ .el-collapse-item {
    width: 100%;
    position: relative;

    /deep/ .el-collapse-item__content {
      padding-bottom: 0px;
      background-color: #f2f2f2;
    }

    /deep/ .el-collapse-item__header {
      font-size: 14px;
      color: #ffffff;
      background-color: #2f5597;
      height: 32px;

      /deep/ .header-icon {
        margin: 3px 0px 0px 3px;
      }
    }
  }
}
</style>

谷歌88版本效果如下：

谷歌89后版本效果如下：

将样式代码改为如下后，89版本即能正确显示：

<style lang="scss" scoped>
@import '../../../../styles/order/edit.scss';
/deep/.el-collapse {
  .el-collapse-item {
    width: 100%;
    position: relative;

    .el-collapse-item__content {
      padding-bottom: 0px;
      background-color: #f2f2f2;
    }

    .el-collapse-item__header {
      font-size: 14px;
      color: #ffffff;
      background-color: #2f5597;
      height: 32px;

      .header-icon {
        margin: 3px 0px 0px 3px;
      }
    }
  }
}
</style>