Vue同一文件内定义的子组件scoped样式不生效如何解决？

Vue的scoped样式实现逻辑是：给当前组件模板内所有原生DOM元素添加唯一的自定义属性（如data-v-xxxx），同时编译后的CSS选择器会自动追加对应的属性选择器，确保样式只作用于当前组件内的元素。

• 子组件的根元素会同时继承父组件的自定义属性，因此你给.test（子组件根元素类名）设置的样式可以正常匹配生效。
• 子组件内部的.title、.description元素不会被添加父组件的自定义属性，父组件scoped样式编译后生成的选择器为.test[data-v-xxxx] .title，无法匹配到子组件内没有对应属性的元素，因此样式失效。

方案1：使用深度选择器（最推荐） #

在父组件scoped样式中使用深度选择器穿透作用域限制，Vue2+scss环境下使用::v-deep即可，修改样式代码如下：

<style scoped lang="scss">
#hello {
  display: flex;
  flex-direction: column;
  ::v-deep .test {
    text-align: left;
    margin-top: 10px;
    .title {
      font-size: 50px;
      color: orange;
    }
    .description {
      font-size: 10px;
      line-height: 12px;
      color: red;
    }
  }
}
</style>

添加深度选择器后，编译后的CSS会变为[data-v-xxxx] .test .title，可以正常匹配子组件内部元素。

方案2：将样式写在子组件内部 #

直接给test子组件添加独立的scoped样式，把.title、.description的样式放在子组件内部定义，符合组件样式内聚的规范，也可以正常生效。

方案3：移除父组件style的scoped属性（不推荐） #

直接删除父组件style标签的scoped属性，样式会变为全局样式可以匹配所有元素，但会造成全局样式污染，后续其他组件出现同名类名会被意外影响。

内容的提问来源于stack exchange，提问作者CCCC