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

Static slot content vnode's el property remains null after the component is mounted #6851

Open
oliverzy opened this issue Oct 11, 2022 · 7 comments
Labels
🐞 bug Something isn't working 🔩 p2-edge-case

Comments

@oliverzy
Copy link

Vue version

3.2.40

Link to minimal reproduction

https://sfc.vuejs.org/#eNqNUktu2zAQvcqUG8mARKaflSsbKZoC3QRdtEAXZReqNHbU8BeSshMIukjOkjvlCiEpR0gcIAggQHjz3rxHcmYgX4yhux7JklSusZ3x4ND3Zs1VJ422HgawuCmgd/hTaO9ghI3VErLQlH2eVV+1NAeCsgiiaeQBuKrYZB1MA/Aojag9BgRQRe26artdggD7K0zfhCoWmSo5BkHF5mZSkCm6lLWh/51W4QpDyjsQjpMlpEqsheNEzMmF98YtGeuVudzSRkt2Gjhme+U7iWWr5elH+oF+OgnRzj+tU3Sy/Gf13qENiZwUT8xZKO7QlhZVixbtq2FH2meBR9yL0Jg5cjWGB3h85zcPrwCtznW4EbYFKLz2v7rm8niiXDVaOQ/SbWEV+/PsOwqh4be2on2XLQ5TnVQuLcVqjsgf6Tkpr92NaiBfwGo9zYOxel93fj7B3AMQTbVAKvQ2z85wU/fCQzSGsx/n8E2gROXv726zYkqm7aTJF39O/lIU0WlcvL5yF+/Xw5CuN44VCyhVO2V6D7tS6hbFipPAczJRMSksYfo9X8LxAX5THf4=

Steps to reproduce

See the vue sfc playground link.

What is expected?

Switch Vue version to 3.2.39, the output is the dom element which is correctA.
image

What is actually happening?

Switch Vue version to 3.2.40,the output is null which is wrong.
image

System Info

No response

Any additional comments?

No response

@zhangzhonghe
Copy link
Member

It should be caused by the change here.

// optimized normalization for template-compiled render fns
export function cloneIfMounted(child: VNode): VNode {
return (child.el === null && child.patchFlag !== PatchFlags.HOISTED) ||
child.memo
? child
: cloneVNode(child)
}

see #6591

@baiwusanyu-c
Copy link
Member

baiwusanyu-c commented Oct 16, 2022

As @zhangzhonghe said, when fixing bug #6591 , @yyx990803 removed the reference to the dom on the hoisted vnodes to avoid memory leaks, you can bind a key to avoid hoisted

<template>
  <Comp><div key='wqewqewq'>
    wqewqewq
    </div></Comp>
</template>

@oliverzy
Copy link
Author

This is technically a breaking change, I think the workaround above is not ideal

@zhangzhonghe
Copy link
Member

duplicate of #815

This is not a breaking change!

@oliverzy
Copy link
Author

OK, strictly speaking, it's an undocumented internal api change since 3.2.40.
Let's see how can we proceed with this. One of our internal component library relies on this behavior, currently we have to lock the vue version to 3.2.39 for quick fix.

@edison1105 edison1105 added 🐞 bug Something isn't working ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. regression labels Oct 17, 2022
@LinusBorg
Copy link
Member

I don't think labeling this as an important bug is warranted. it's essentially an edge case when using an API that's not even public, strictly speaking.

@LinusBorg LinusBorg added ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🔩 p2-edge-case regression and removed regression ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Oct 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working 🔩 p2-edge-case
Projects
None yet
Development

No branches or pull requests

6 participants