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

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>

2021

I found an answer, styles from parent are applied to child components but only for first direct children e.g. when we have button component

<template>
   <button class='btn' />
</template>

With this you can style your btn class from parent to aviod that you need to wrap your btn component with some dummy div or the best use vue-fragment library and you will avoid style leaking problem with scoped attribute.

<template>
   <fragment>
      <button class='btn' />
   </fragment>
</template>

With this you are not able to style btn class inside your child component.

Full Example here: https://codesandbox.io/s/falling-fog-2mu5z?file=/src/components/HelloWorld.vue

Vue Fragment: https://www.npmjs.com/package/vue-fragment