Hydration mismatch when using v-if="false" in nested <slot> of external component #11326
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
scope: slots
scope: ssr
Vue version
3.4.27
Link to minimal reproduction
https://stackblitz.com/edit/nuxt-starter-s8nc2r?file=app.vue
Steps to reproduce
Just run the nuxt app, and you can see the warning in console.

It seems that the ssr render output for code
<div v-if="false">test</div>
is wrong, and the output is<div><!--[--><!--v-if--><!--]--></div>
, which contains more child nodes than client vdom(<div><!--[--><!--]--></div>
).This warning only occured when i use external component(ex. of element-ui). However, it is normal when i use a local component, even if the local compnent is same as the external one completely.
What is expected?
Fixing the warning of hydration mismatch, the ssr render output shouldn't include
<!--v-if-->
?What is actually happening?
Hydration mismatch, ssr render output
<div><!--[--><!--v-if--><!--]--></div>
System Info
No response
Any additional comments?
Maybe this issue is similar to #5834.
The text was updated successfully, but these errors were encountered: