Ref around slot without a wrapper element

[Tofandel]

I need to get the list of elements inside a slot, which in vue 3 seems to only be achievable through a ref because vue does not give a way to get the list of elements in a component anymore

So here is what I tried

<template>
  <template
    ref="defaultSlot"
  >
    <slot />
  </template>
</template>

<script setup>
import { ref } from "vue";

const defaultSlot = ref(null);
</script>

But when doing that, the inner slot mounts but does not render, instead this is what is being rendered

So that means vue is not using it's own template, but rather the HTML template element

<template>
  <div
    ref="defaultSlot"
  >
    <slot />
  </div>
</template>

Wrapping it with a div does work, but it's in fact exactly what I want to avoid, I want the slot and component to maintain it's multiple root elements

I also tried using useSlots().default();, but as previously mentionned, this gives a list of vNodes, which does not contain any ref to their associated html element

Is there any way to achieve this? I was thinking of teleport but it's the same problem, without an element to teleport to it would not work

[chenxch]

demo
Hope this helps you.

[Tofandel]

I see, yes it does a lot, on currentInstance vNodes have el set, how come it's not the case when using useSlots().default even in mounted?

PS: I also tried with a render function and h(Fragment, {ref: defaultSlot}, slots.default()) but the ref is a weird text node without any childNodes

[liulinboyi]

I see, yes it does a lot, on currentInstance vNodes have el set, how come it's not the case when using useSlots().default even in mounted?

PS: I also tried with a render function and h(Fragment, {ref: defaultSlot}, slots.default()) but the ref is a weird text node without any childNodes

About template, I think this can help you.

https://vuejs.org/api/built-in-special-elements.html#template
The tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.

The special handling for is only triggered if it is used with one of these directives:

• v-if, v-else-if, or v-else
• v-for
• v-slot

[shtse8]

I see, yes it does a lot, on currentInstance vNodes have el set, how come it's not the case when using useSlots().default even in mounted?

PS: I also tried with a render function and h(Fragment, {ref: defaultSlot}, slots.default()) but the ref is a weird text node without any childNodes

I have the same question, getter ref from fragment node returns a wried text node without any children.

[mryellow]

@liulinboyi mentions:

The special handling for is only triggered if it is used with one of these directives:

Which includes v-slot. Which got me thinking...

Without using composition API I see the default slot now available on this.$el.

<template v-slot:default>
</template>

<script>
const defaultSlot = this.$el;
</script>