v-show does not work when used on a component that is slotted into a parent component with custom render function
Vue version
3.3.4
Link to minimal reproduction
https://stackblitz.com/edit/bluwy-create-vite-extra-uaq5oj?file=src%2FApp.vue
Steps to reproduce
The linked StackBlitz has a <Parent />
component that has a custom render function that just renders its default slot.
It then has a <Child />
component that renders a text I should not show
.
The App.vue
then uses these two components as below:
<Parent>
<Child v-show="false" />
</Parent>
What is expected?
The child component should not be rendered on SSR-rendered HTML. The text I should not show
should not be displayed at all in any stage of the page load.
What is actually happening?
There is a flash of text I should not show
which is removed when hydration kicks in.
This does not happen when using v-show on a native element instead of a custom component.
System Info
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: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.4.2 - /usr/local/bin/npm
pnpm: 8.10.5 - /usr/local/bin/pnpm
npmPackages:
vue: ^3.3.8 => 3.3.11
Any additional comments?
No response
Noticed initially when using v-show
on a child component of a Nuxt component <NuxtClientFallback />
as reported here
duplicate of https://github.com/vuejs/core/issues/6123