How to use "cloud" styles in VueJS components for a single file?

Question

Docs in VueJS states that "scoped" should restrict styles to a component. But if I create 2 components with the same “base” style, it will flow from one component to 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 baz to be different in both components. But after creating the web page, I can see yje red text on a blue background, this means that the style of "foo" with binding affects the component "bar". The generated code is as follows:

<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 by specifying two data attributes in the bar component. But why?

Answer 1

Vue:

node CSS , CSS CSS.

, -, , , .

, css modules:

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

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