Hydration mismatch when custom element contains child node
Vue version
3.2.47
Link to minimal reproduction
https://github.com/dritter/vue-ssr-hydration-mismatch-reproducer
Steps to reproduce
- git clone https://github.com/dritter/vue-ssr-hydration-mismatch-reproducer
- cd vue-ssr-hydration-mismatch-reproducer
- npm i
- npm run dev
- Look in the Browser console for hydration mismatches.
What is expected?
No hydration mismatch should occur. The custom component should be skipped in hydration.
What is actually happening?
System Info
System:
OS: Linux 6.2 Arch Linux
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 8.89 GB / 15.39 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 19.8.1 - /usr/bin/node
npm: 8.19.2 - /usr/bin/npm
Browsers:
Chromium: 112.0.5615.121
Firefox: 112.0
npmPackages:
vue: ^3.2.25 => 3.2.47
Any additional comments?
This does only happen, if <my-component>
contains child nodes.
I discovered this in https://github.com/nuxt/nuxt/issues/20327