Get width of slot from useSlot()

[d0peCode]

I'm getting the width of the HTML element which is passed as slot like this:

<template>
	<div>
    <button @mouseover="state.show = true" @mouseleave="state.show = false">
      hover me
    </button>
    <div v-if="state.show">
	    <slot name="test"></slot>      
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, useSlots, nextTick } from 'vue'

const slots = useSlots();
const state = reactive({
  show: false
})  

watch(() => state.show, () => {
  if (state.show) {
    nextTick(() => {
      console.log(slots.test()[0].el.offsetWidth)
    })
  }
})
  
</script>

This print correct value only on first hover of button. When hovered more than one time, it logs 0. Why? How to get width of <slot name="test"></slot> every time I hover button?

Playground with above example

I also tried with getBoundingClientRect() on onUpdated vue hook which is executed after DOM changes:

<script setup>
import { reactive, watch, useSlots, nextTick, onUpdated } from 'vue'

const slots = useSlots();
const state = reactive({
  show: false
})  
onUpdated(() => {
    if (state.show && slots.test() && slots.test()[0] && slots.test()[0].el) {
			  console.log(slots.test()[0].el.getBoundingClientRect())   
    }

})
</script>

With the same result - it shows correct width only on first hover. Playground with this example

[Sight-wcg]

It looks like this other issue is related: #2196

Try it, you'd have to use a render function.

Playground example

<template>
 <div>
    <button @mouseover="state.show = true" @mouseleave="state.show = false">
      hover me
    </button>
    <div v-if="state.show">
      <RenderTestSlot />      
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, useSlots, nextTick, computed, h, Fragment } from 'vue'

const slots = useSlots();
const state = reactive({
  show: false
})  

const RenderTestSlot = computed(() => h(Fragment, slots.test ? slots.test() : []));

watch(() => state.show, () => {
  if (state.show) {
    nextTick(() => {
      console.log(RenderTestSlot.value.children[0].el.offsetWidth)
    })
  }
})
  
</script>

[d0peCode]

Yeah this seems to be working perfectly. Thank you!

[Caffeine19]

really thanks for your answer!!!
but I use typescript and got a few problems

1. type of renderTestSlot can't be used in Templeate
2. the property 'el' didn't exit on children[0],

so I have to use assert as any to solve this, wish some one have better solution
and here is my code

<script setup lang="ts">
import {
  ref,
  type PropType,
  reactive,
  useSlots,
  onMounted,
  h,
  Fragment,
  computed,
  nextTick,
  type VNodeArrayChildren,
  watch
} from 'vue'
import NarrowButton from './NarrowButton.vue'
import type { MenuItem } from '@/types/menuItem'
const props = defineProps({
  menuItemList: Array as PropType<MenuItem[]>,
  visible: { type: Boolean, defaults: false }
})

const selectedMenuItemIndex = ref(-1)

const emits = defineEmits<{ (e: 'select', index: number): void }>()
const onMenuItemClick = (index: number) => {
  if (selectedMenuItemIndex.value === index) return
  selectedMenuItemIndex.value = index
  emits('select', index)
}

const menuPosition = reactive({ top: 0, left: 0 })

const slots = useSlots()

const TriggerSlotRenderer = computed<any>(() => h(Fragment, slots.trigger ? slots.trigger() : []))

watch(
  () => props.visible,
  (newVal) => {
    if (!newVal) return
    nextTick(() => {
      if (TriggerSlotRenderer.value.children) {
        const triggerSlot = (TriggerSlotRenderer.value.children as VNodeArrayChildren)[0]
        if (triggerSlot) {
          const triggerEl = (triggerSlot as any).el
          const rect = triggerEl.getBoundingClientRect()
          console.log('🚀 ~ file: DropMenu.vue:54 ~ onMounted ~ rect:', rect)
          menuPosition.top = rect.bottom + 20
          menuPosition.left = rect.left
        }
      }
    })
  }
)
</script>
<template>
  <div>
    <TriggerSlotRenderer />
    <Teleport to="body">
      <transition name="zoom">
        <div
          v-if="visible"
          class="bg-zinc-950/60 border-zinc-700 backdrop-blur-xl fixed z-20 flex flex-col items-stretch space-y-2 border rounded py-1.5 top-20 left-20"
          :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
        >
          <NarrowButton
            :action="() => onMenuItemClick(index)"
            v-for="(item, index) in menuItemList"
            :key="index"
            :iconStyle="item.iconStyle"
            :label="item.label"
            :activeStyle="
              item.activeStyle ||
              'bg-apathetic-500 text-zinc-50 hover:!bg-apathetic-500/80 hover:!text-zinc-50'
            "
            labelStyle="text-base font-normal"
            class="space-x-1.5 rounded-none px-2 py-1.5 border-0"
            :active="selectedMenuItemIndex === index"
            :class="item.buttonStyle"
          >
          </NarrowButton>
        </div>
      </transition>
    </Teleport>
  </div>
</template>

[Sight-wcg]

- const TriggerSlotRenderer = computed<any>(() => h(Fragment, slots.trigger ? slots.trigger() : []))
+ const TriggerSlotRenderer = computed<VNode>(() => h(Fragment, slots.trigger ? slots.trigger() : []))

- const triggerSlot = (TriggerSlotRenderer.value.children as VNodeArrayChildren)[0]
- if (triggerSlot) {
-   const triggerEl = (triggerSlot as any).el
+ const triggerSlot = TriggerSlotRenderer.value.children[0] as VNodeChild
+ if (triggerSlot && isVNode(triggerSlot)) {
+   const triggerEl = triggerSlot.el

- <TriggerSlotRenderer />
+ <component :is="TriggerSlotRenderer" ></component>