为什么在Vue2中不使用"::v-deep"选择器就可以定位子组件

Question

我在Vue 2.x中有一个项目，我想知道为什么在不使用/deep/、::v-deep或>>>选择器的情况下，定位子组件的类是有效的。

我在项目中使用这些：

"node-sass": "5.0.0",
"sass": "1.32.12",
"sass-loader": "10.1.1",

此外，我还创建了一个沙箱来实时演示这个问题。

如果我在父组件中，即使在作用域样式中，我也可以瞄准子组件，如下所示：

<style lang="scss" scoped>
  .parent-component {
    .child-component {
      /* I set the child components background color even though I don't use a `deep` selector */
      background-color: blue;
    }
  }
</style>

在子组件中，我有：

<style lang="scss" scoped>
  .child-component {
    /* I'm overwritten by the parent component */
    background-color: red;
  }
</style>

根据我对作用域样式如何工作的理解，如果没有我在父级中做这样的事情，这实际上不应该起作用：

<style lang="scss" scoped>
  .parent-component {
    ::v-deep .child-component {
      background-color: blue;
    }
  }
</style>

Answer 1

在不使用::v-deep的情况下，只能影响子组件的根元素。如果你这样写，风格将不会被应用。

<template>
  <div>
    <div class="child-comp">
      How in the world am I styled without /deep/ or ::v-deep or >>>
    </div>
  </div>
</template>