defineCustomElement should inform wrapped Vue component that slots are being used

[pcoterecollective]

🧵 Context

Following up on issues #8734, there’s a limitation when using defineCustomElement with slots.

---

🐛 Problem

Consider the following Vue component:

<script setup lang="ts">
defineProps<{ title: string }>()
</script>

<template>
  <div>
    <div
      v-if="title || $slots.header"
      :style="{ ...some styles that should always be applied on the header slot container... }"
    >
      <slot name="header">{{ title }}</slot>
    </div>
    <slot name="default" />
  </div>
</template>

When this component is registered as a web component using defineCustomElement, the header slot never renders, even if it is passed in via the DOM. This happens because $slots and useSlots() are unaware that the slot is being used in the shadow DOM context.

This can be a significant problem when building flexible, slot-driven web components with Vue.

---

💡 Suggestion

Introduce a new composable, such as:

const { hasSlot } = useCustomElementSlots()

This would return runtime-aware slot usage information in the context of defineCustomElement.
If not used within a custom element, it could gracefully return empty or false values.

---

✅ Why it matters

• Ensures slot-based rendering works correctly inside web components
• Enables accurate conditional logic based on actual slot presence
• Makes it easier to author Vue components that work seamlessly in both standard and custom element environments