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 c

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>