vue
vue copied to clipboard
vuejs
Scoped CSS attribute is reused or discarded when switching between components with scoped CSS
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
not only functional components,use functional components just to make sameVnode true,a functional component and a normal dom is ok as well
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);
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
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>
similar bug, affected pure normal components with slot, please see my simple demo.
https://codesandbox.io/s/vue-template-jimot
@CzBiX
I think your problem is same with me.
two child reused but scopedId not be copied .
@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!
@posva I submitted a pull request for this issue #12938 . But I noticed the requirements state that I should merge to main instead of dev, even though the Contributing Guide says I shouldn't.
Should I make one for main instead?
