Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-t9skwh?file=src%2FApp.tsx

Steps to reproduce

Click "Toggle useSlot" button

What is expected?

Slot reactivity supported

What is actually happening?

Slots reactivity is not supported

System Info

No response

Any additional comments?

Sometimes there is a need to transfer a slot to the component, depending on the reactive value. In the syntax of SFC templates, this can be done as follows:

<template>
  <Comp>
    <template #slotName v-if="someReactiveVariable">
       Slot value
    </template>
  </Comp>
</template>

But when I try to do something like this in JSX, it lose the ability to reactively control the transfer of the slot to the component:

const render = () => (
  <Comp>
    {{
      slotName: someReactiveVariable.value ? () => 'Slot value' : undefined
    }}
  </Comp>
)

What to do in such a situation?

Try

{{
--  text: useSlot.value ? () => 'slot value' : undefined,
++  text: () => (useSlot.value ? 'slot value' : undefined),
}}

Maybe relate to #6484

In this case, the slot will always be available in the slots object and because of this, the slots.text ? if true : if false check will be unavailable, which differs from the behavior in the <template> syntax. (This example is considered in the reproduction)

Indeed, we can perform the slot function and check if something is returned, but this entails additional checks and an increase in the amount of code

Most likely it really refers to the issue https://github.com/vuejs/core/pull/6484

Is the proposed merge expected?

sfc-playground pr 6484

@sxzz, @baiwusanyu-c, please take a look at https://github.com/vuejs/core/pull/6484 for final approval 🥺🥺🥺