When trying to access the Vuejs $slots instance, I encounter el = null
, but type = "div"
Here is the template:
<slot name="head">
<h1>
{{ text }}
</h1>
</slot>
And in the script section:
...
const slotContent = this.$slots.head();
console.log(slotContent[0]);
Even though we have added a div element, the .el property remains null.
In the parent component:
<custom-component :key="human.id">
<template #head>
<div style="display: flex;">
This is the Head
</div>
</template>
<template #default>
<h1>Head</h1>
</template>
</custom-tooltip>
The console displays:
anchor: null
appContext: null
children: (2) [{…}, {…}]
component: null
dirs: null
dynamicChildren: null
dynamicProps: null
el: null <-- element is null
...
type: "div" <-- div is passed
Error: Cannot read properties of undefined (reading 'el')