html - How to correctly use "scoped" styles in VueJS single file components?

Question

The docs on VueJS state that scoped should limit styles to the component. But if I create 2 components with same baz style, it will leak from one component into another:

foo.vue

<template>
<div class="baz">
  <Bar></Bar>
</div>
</template>

<style scoped>
.baz {
  color: red;
}
</style>

bar.vue

<template>
<div class="baz">bar</div>
</template>

<style scoped>
.baz {
  background-color: blue;
}
</style>

I expect that baz will be different in both components. But after generating a web page, I can see the red text on blue background, which means that foo's scoped style affects the bar component. The generated code looks like this:

<div class="baz" data-v-ca22f368>
  <div class="baz" data-v-a0c7f1ce data-v-ca22f368>
    bar
  </div>
</div>

As you can see, the "leak" is intentionally generated by VueJS via specifying two data attributes into the bar component. But why?

Answer 1

You can read on the Vue loader's docs:

A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.

This is apparently what it is meant to do, even though it might seem a bit confusing.

If you want to avoid that, you should use css modules:

<template>
<div :class="$style.baz">
  <Bar></Bar>
</div>
</template>

<style module>
.baz {
  color: red;
}
</style>