RenderToString does not support ref type teleport
Version
3.0.4
Reproduction link
https://codesandbox.io/s/naughty-wind-fufkn
Steps to reproduce
ref type teleport
teleport SSR test
When ref type report is used, it is not reflected in ctx
const ctx: SSRContext = {}
const html = await renderToString(
createApp({
setup() {
const svg = ref()
const circle = ref()
return {
svg,
circle
}
},
template: `
<svg ref="svg"></svg>
<teleport :to="svg" v-if="svg">
<circle ref="circle"></circle>
</teleport>
`
}),
ctx
)
console.log(html) // <!--[--><svg></svg><!----><!--]-->
console.log(ctx) // return {}
What is expected?
The same result as with id
What is actually happening?
No teleport object in context
IMO:
- With ref target, teleports can find the target in current component scope, so it's rendered to string directly.
- With id target, teleports cannot determine where the target is during SSR, so it's extracted to the context.
- With ref target, teleports can find the target in current component scope, so it's rendered to string directly.
@meteorlxy If so, I would like to get results that include circle in the renderToString.
My previous comment was wrong.
The ref is still undefined during SSR, it's only available after mounted.
So it should not be extracted to ctx.
I understand your kind answer, but I still have some questions.
- Based on the result code of renderToString using id or ref, Does not the server-side rendering code expose the teleport template?
- If made source using ref and v-if (Like an example link), where would the reference be kept and processed after mounted?
The to has to be present at the moment the component renders, so as explained, using an unitialized ref won't work. In general, it's better to have the teleport target outside of the component where teleport is used: https://v3.vuejs.org/api/built-in-components.html#teleport. Because of this you cannot use the ref="svgRef" attribute for teleports. You can still use a dynamic selector