父范围类名称也适用于插槽子 [重复]

Question

考虑一个具有作用域样式的Child 组件，它在内部使用foo 类名：

<!-- Child -->

<template>
  <div class="foo">
    This is a child
  </div>
</template>

<style scoped>
.foo {
  color: blue;
}
</style>

还有一个 Parent 具有作用域样式的组件，它在内部也使用 foo 类名，并且还提供了一个插槽：

<!-- Parent -->

<template>
  <div class="foo">
    <div>This is a parent</div>
    <slot></slot>
  </div>
</template>

<style scoped>
.foo {
  color: red;
  margin-bottom: 10px;
}
</style>

将Child 组件嵌套到Parent 组件中作为插槽：

<!-- App -->

<template>
  <div>
    <Parent>
      <Child />
    </Parent>
  </div>
</template>

<script>
import Parent from "./components/Parent";
import Child from "./components/Child";

export default {
  components: {
    Parent,
    Child
  }
};
</script>

实际结果

Parent 中的foo 类的样式也适用于Child 中具有foo 类的元素。这是实际 DOM 的屏幕截图：

预期结果

我希望 Child 的样式将与任何父级隔离。我想知道它是否是设计使然，还是可以在不重命名类的情况下进行修复，因为它会打破隔离的整个想法。

---

这里有一个CodeSandbox 来玩弄源代码。

Answer 1

这是一种已知的行为，它应该是这样的。当您的孩子与父母的班级相同时，孩子的班级将覆盖父母班级。 （这就是你的例子中发生的事情，孩子的 div 是蓝色的）。

它不是完全孤立的，这样做是没有意义的。有时需要一个父组件来覆盖子组件样式，这就是原因。

因此，例如，如果您使用标签!important，父组件将覆盖子组件，这是一种想要的行为。

当有更复杂的情况（如祖父母或祖父母）时，可以使用此处讨论的深度范围样式：https://github.com/vuejs/vue/issues/4298

然后移到 vue-loader 这里：https://github.com/vuejs/vue-loader/issues/661

并且是在vue-loader的标签v12.2.0上实现的。

然后，做

.foo >>> .bar { color: red; }

我们会有

.foo[data-v-xxxxxxx] .bar { color: red; }