Using <component :is="'style'" type="text/css"> with slots produces hydration mismatch in vue + ssr (vue+vite works fine)
Vue version
3.2.25
Link to minimal reproduction
https://stackblitz.com/edit/github-tzgxfc?file=src%2Fpages%2FHome.vue
Steps to reproduce
- Create a new project based on the ssr example from nuxt contribution: https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter
- Add a component that has slots with a
<component :is="'style'" type="text/css">
tag. - Add usage of the new component.
- Warning in console
What is expected?
I expect the same behaviour as in vue2.
What is actually happening?
A warning is shown about hydration mismatch.
System Info
(from stackblitz)
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.20.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.4.2 - /usr/local/bin/npm
pnpm: 8.6.10 - /usr/local/bin/pnpm
npmPackages:
vue: ^3.2.25 => 3.3.4
Any additional comments?
Originally opened an issue on nuxt: https://github.com/nuxt/nuxt/issues/23323 I do understand that this is a very particular edgecase.