Subscribe on changes!

Scoped styles applied to child component when component has 1 root element or when used composition api

avatar
Mar 7th 2021

Version

3.0.7

Reproduction link

https://codesandbox.io/s/nice-bas-xpf2b?file=/src/components/HelloWorld.vue

Steps to reproduce

Open: https://codesandbox.io/s/nice-bas-xpf2b?file=/src/components/HelloWorld.vue

see that the same logic works different depended on compostion api or count of root element.

What is expected?

<style scoped>
.tst {
  background: red;
}
</style>

background: red; must never be applied to child component class

What is actually happening?

class .tst applied to child components when:

  1. Child root component is only one
  2. Child root component is switched by v-if
  3. Child root component used composition API for adding second, third etc elements to DOM (in this case only FIRST element got background: red;)

scoped styles must never be applied to child compontens OR at least always (no matter it used composition api or have 2-3-5 root childs), we need clear login like "always works like this" or "newer works like this"

When used Composition api for SWITH (like v-if) - first DOM element will have background: red; but second - no. Its extra strange because I have only 1 root element in one time (like v-if) but second elemen doest get style.

avatar
Mar 8th 2021

the first two examples are expected, even though they are admittedly non-ideal. Why:

In Vue 2, every component had a root node, and scoped styles were specifically designed to also be apply-able to a child component's root node in order to control .e. it's positioning from the parent.

However in Vue 3, we know have Fragments - components are no longer guaranteed to have a root node. The compromise that was reached for the Migration story was that styles could only apply to components that actually guarantee to have a rood node. In your second example, there's a second root node, that is simply never shown because of v-if="false", but the static analysis during compilation doesn't take care fo that because it's a nonsensical instruction in "real life" to have a static false value for v-if.

The third example however should be seen as a bug, imho.

avatar
Mar 8th 2021

The third is also fragment too, Why is it a bug...

avatar
Mar 8th 2021

Because the style is applied, when it shouldn't be applied to fragments at all.

avatar
Mar 8th 2021

@Kingbultsea The 3rd example is definitely a bug, since the SAME code written in the traditional style through