Missing breaking change: Cannot easily detect empty slots from child anymore

[dorian-marchal]

In Vue 2, empty slots could easily be detected from the component using this.$slots.{name} but this is not possible anymore with Vue 3.

For example, this component renders "no slot" with Vue 2.7.16 and "slot" with Vue 3.4.23:

# App.vue
<SlotChange>
  <template v-if="false">empty</template>
</SlotChange>


# SlotChange.vue
<template>
  <div>
    <template v-if="getSlotContent($slots.default)">slot</template>
    <template v-else>no slot</template>
    <hr />
    <slot />
  </div>
</template>

<script setup>
function getSlotContent(slot) {
  return typeof slot === 'function'
    ? // Vue 3
      slot()
    : //  Vue 2
      slot
}
</script>