Vuejs - $slots have 'el' is null-CodePudding

WHen I access Vuejs $slots instance I get el = null but type = "div"

template:

  <slot name="head">
    <h1>
      {{ text }}
    </h1>
  </slot>

script

  ...
  const slotCont = this.$slots.head();
  console.log(slotCont[0]);

the .el is null event though we've added sd

parent

<custom-component :key="human.id">
    <template #head>
      <div style="display: flex;">
        this is Head
      </div>
    </template>

    <template #default>
     <h1>Head</h1>
    </template>
</custom-tooltip>

console.log

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')

CodePudding user response：

vm.$slots and vm.$scopedSlots refers to slot inputs passed to the component.

So if you didn't provided any <template #head> in your component, it won't appear inside these properties.

AFAIK, you can't access the default slot from the vm object, Vue renders it as if it was not even in a slot in the first place. You'll need to query that element in a different way.

CodePudding user response：

Just tried on Vue Playground - and el is defined - look at the browser's console.