fix(teleport): ensure correct rendering when target is empty

[baiwusanyu-c]

close: #9782
close: #8146

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	89.5 kB (+4 B)	34.1 kB (+3 B)	30.7 kB (+47 B)
vue.global.prod.js	147 kB (+4 B)	53.3 kB (+2 B)	47.7 kB (-25 B)

Usages

Name	Size	Gzip	Brotli
createApp	49.8 kB	19.5 kB	17.8 kB
createSSRApp	53.1 kB	20.8 kB	19 kB
defineCustomElement	52.1 kB	20.2 kB	18.5 kB
overall	63.3 kB	24.4 kB	22.3 kB

[codspeed-hq]

CodSpeed Performance Report

Merging #9783 will not alter performance

_{Comparing baiwusanyu-c:bwsy/fix/teleportEmptyTarget (42dee55) with main (9fa8241)}

Summary

✅ 53 untouched benchmarks

[netlify]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	d5fe8ba
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/659d419edfe77e0008231bff

[netlify]

❌ Deploy Preview for vue-next-template-explorer failed.

Name	Link
🔨 Latest commit	d5fe8ba
🔍 Latest deploy log	https://app.netlify.com/sites/vue-next-template-explorer/deploys/659d419eb7ff7f0008a5b31e

[xvaara]

@yyx990803 could we have this merged? It's weird that you have to have have an "or" in the to prop:

<Teleport :to="props.teleportTo || 'body'" :disabled="!props.teleportTo">

if you forget, the ssr doesn't render the content anywhere.

[skirtles-code]

@xvaara I'm not sure exactly what problem you're having, but based on the example you gave I don't think this PR will fix it. This change only impacts cases where disabled is false and the to is null/undefined, which doesn't seem to be what you're describing.

[xvaara]

@xvaara I'm not sure exactly what problem you're having, but based on the example you gave I don't think this PR will fix it. This change only impacts cases where disabled is false and the to is null/undefined, which doesn't seem to be what you're describing.

@skirtles-code
That is exactly the case I'm describing and we are having. Maybe my example was missing the fact that teleportTo is undefined, but I though that was given in this context.

We created out own internal teleport component that basically has a render function:

 return () =>
      props.disabled || !props.to
        ? slots.default?.()
        : h(Teleport, {to: props.to}, [slots.default?.()])

That way we don't have hydration mismatches.