41

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?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
grigoryvp
  • 40,413
  • 64
  • 174
  • 277
  • It might be a special case as the two components are nested. Don't know if it qualifies as a bug, though. – cello Aug 26 '17 at 20:29

2 Answers2

60

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>
Mario Lamacchia
  • 1,703
  • 1
  • 13
  • 19
  • 35
    Well done. That's some seriously impressive interpretation. The above docs quote is so mind-warping that it might as well just be a low-res gif of a mobius strip illustration. – AJB Mar 02 '18 at 08:18
  • Could this also be stated as: “a parent component’s scoped style will still affect any descendant”? I am asking sincerely – Jar May 15 '20 at 23:57
  • 1
    Not quite @Jared . "A child component's root node" - first element within – Michal M. Jun 09 '20 at 13:41
2

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

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Freestyle09
  • 4,894
  • 8
  • 52
  • 83