Vue: Scoped CSS attribute is reused or discarded when switching between components with scoped CSS

[sin1ght]

Version

2.6.10

Reproduction link

• Functional components: https://github.com/sin1ght/test
• Regular components and slots: https://codesandbox.io/embed/vue-template-3pnsx

Steps to reproduce

After npm run serve, click the toggle button and find that child has no style.

Child and child2 components are reused, child's data-v-* disappears, causing the style to disappear

What is expected?

Child should have a black background scope style

What is actually happening?

Child without style

[sin1ght]

not only functional components,use functional components just to make sameVnode true,a functional component and a normal dom is ok as well

[sin1ght]

i add two lines code in patchVnode,and it work will at my demo,but i'm not sure

oldVnode.fnScopeId = vnode.fnScopeId; setScope(oldVnode);

[posva]

I tested with the 4 possible combinations among regular and functional components and the problem only appears when both are functional

If you are up to give the fix a try, you can. If other things break, you should see tests failing

[sin1ght]

if samaVnode true then patchVnode

regular component's tag will changed,but functional component not

so,a normal dom is ok as well

//parent.vue

<template>
  <div class="parent">
    <Child class="child" v-if="!test"/>
    <div class="child2" v-if="test">
  </div>
</template>

[CzBiX]

similar bug, affected pure normal components with slot, please see my simple demo.

https://codesandbox.io/s/vue-template-jimot

[sin1ght]

@CzBiX
I think your problem is same with me.
two child reused but scopedId not be copied .

[posva]

@sin1ght It's weird I couldn't see the problem in your repro using regular components but others' repro do show so I adapted the title. Sorry about that!