Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scoped CSS attribute is reused or discarded when switching between components with scoped CSS #10416

Open
sin1ght opened this issue Aug 20, 2019 · 9 comments · May be fixed by #10454
Open

Scoped CSS attribute is reused or discarded when switching between components with scoped CSS #10416

sin1ght opened this issue Aug 20, 2019 · 9 comments · May be fixed by #10454

Comments

@sin1ght
Copy link

sin1ght commented Aug 20, 2019

Version

2.6.10

Reproduction link

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

@posva posva added the bug label Aug 20, 2019
@posva posva changed the title patchvnode时vnode复用,没有处理fnScopeId或者_scopeId吗,scope 样式丢失了,满足sameVnode复用条件时,稳定复现 Scoped CSS attribute is reused when switching between 2 functional components with scoped CSS Aug 20, 2019
@sin1ght
Copy link
Author

sin1ght commented Aug 20, 2019

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

@sin1ght
Copy link
Author

sin1ght commented Aug 21, 2019

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);

mt44X9.png

@posva
Copy link
Member

posva commented Aug 21, 2019

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
Copy link
Author

sin1ght commented Aug 21, 2019

if samaVnode true then patchVnode

mUrTBT.png

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

mUrxjx.png

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
Copy link

CzBiX commented Aug 25, 2019

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

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

@sin1ght
Copy link
Author

sin1ght commented Aug 26, 2019

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

@posva posva changed the title Scoped CSS attribute is reused when switching between 2 functional components with scoped CSS Scoped CSS attribute is reused when switching between components with scoped CSS Aug 29, 2019
@vuejs vuejs deleted a comment from JesseChain Aug 29, 2019
@posva
Copy link
Member

posva commented Aug 29, 2019

@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!

@Eceegit
Copy link

Eceegit commented Dec 17, 2022

Hi, I'm interested interested in this particular task, how to I go ahead

NoahKa0 added a commit to NoahKa0/vue that referenced this issue Jan 18, 2023
When patching a node the scope id might change. When it does the flow should be followed for
updating non-same elements to make sure it is updated correctly in the DOM.

fix vuejs#10416
@NoahKa0
Copy link

NoahKa0 commented Jan 18, 2023

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants