bug(ssr): slot tag without default value will render different result between server and client

[zhangyuang]

Version

3.2.33

Reproduction link

github.com

Steps to reproduce

1、git clone https://github.com/zhangyuang/vue-ssr-slot-bug.git
2、pnpm i && pnpm start:vite

What is expected?

Hydrate succeed

What is actually happening?

runtime-core.esm-bundler.js:4072 Hydration completed but contains mismatches

If i have a slot component hope render fallback value if parent don't provide any slot content,

<template>
  <slot>
    {{ title }}
  </slot>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'

const props = defineProps<{
  title?: string,
}>()
const title = ref(props.title)
</script>

But if parent don't provide props.title to slot will cause hydrate error

<template>
  <div class="foo">
    <Foo />
  </div>
</template>

<script lang="ts" setup>
import Foo from './slot.vue'
</script>

---

With debug in source code, when hydrate dom, the server side node be regard as fragment but in the client side , the slot.vue will be compile text node which cause mismatch。

ref:
https://github.com/vuejs/core/blob/main/packages/runtime-core/src/hydration.ts#L108