Vue.js "$slots.default()[0].el" is null when passing dynamic slot with v-for

Question

I'm trying to access HTMLElement of dynamic slot that passed by v-for but el is always empty

app.vue :

<template>
  <div id="app">
    <prod>
       <span>
         <div  v-for="item in items">{{item.title}}</div>
       </span>
    </prod>
  </div>
</template>
.
.
.
data: () => {
    return { items: [{ title: '1' }, { title: '2' }] };
  }

prod.vue :

<template>
  <slot></slot>
</template>
.
.

  mounted() {
    
       console.log(this.$slots.default()[0].el);
  }
.
.

but el is always null but when I pass it hardcoded like below el is available

<prod>
   <span>
     <div>a</div><div>b</div>
   </span>
</prod>

I mean how I can access HTMLElement of dynamic slot ?

Answer 1

its look like there is no solution for this But we can use refs

<div ref="main">
  <slot></slot>
</div>
.
.
// and we can access the dom with :
this.$refs.main 

also there is updated method that you can monitor changes of slots