How to render slot in child component passed down from parent.

[T0miii]

Hi

so i would like to render slots in a component passed from another component.

Lets say i have the following

  <template>
    <tabs>
      <tab-pane>
        <template #label>
            <span class="custom-class">Custom Title <Icon /></span>
             Tab Content
         </template>
      </tab-pane>
      </tabs>
  </template>

The tabs default slot accepts the tab-pane component and the tab-pane component renders (in this case) "Tab Conent". This is all good so far.

Now in my tabs component i have a tab-navigation component where i pass down all the tab-panes conext as props.

Now in my tab-navigation component i cycle trough the panes and would like to render the label slot like this:

{{ pane.slots.label?.() || pane.props.label }}

but i get the following error:

What is the proper way to render slots in a script setup component. If thats even possible?

Here is a quick reproduction Link of what im trying to do:

Expected is to render the passed label slot instead an object gets printed.

https://play.vuejs.org/#__DEV__eNrNVcFu4zYQ/RVGPVgGVLlNblpZQRsssFt0nSBrtIcoB1qiHWUpUiAp14Hjf+8MKUqy103bPe3FEDmPw8c3b8b74JemibctC5Ig1YWqGkM0M21DOBWbeR4YnQdZLqq6kcqQPVFsTQ5krWRNJnBs0oeWdOW28yCe3cjaZs2DPn5HBRsAuPKAXBRSaENqvSFzvCCcfGCcS/KnVLy8mExzkc4cN2ACC8PqhlPDYEVIihfbL5Ji1qwPkx84XTGepbqhIrtptZE1Ix+Wn34ny8pwRn6GtBhKZ31GYGKYMBiyyYa8IAgkA0Xc2UuQxYMv/w18NQJfjcDpDMjD14hAEIHkgF1Xm/hZSwF12SM0DwrQtOJM3TamAr3yICE2gjEKcv31m90zqmWR3y+eWPHlzP6z3uFeHtwpppnaQh36mKFqw4wLv/+8YDv47oO1LFsO6DeC90xL3iJHB/u1FSXQHuEs24/WFpXYLPX7HSij/aOQKCIPFp8H4BK00z89faB7FV/Zc7k4gIregv/V2H8sZMki0mr2mUujI/1kad6D36NGyW1VsrO+X9BttaHIq4vGs2ELCQDUO7x4qnipmACb74EmIW5bqpIpVt4M0eHylIqXh8csfHiENvB5NDIEmCcbQsxFQIrbr7KlyyzE27Z14p758EheCZSFrSvBSquzpYaaSQEuXdCaJUQbBfUZwpAtIfesAL6paOsVUxFZgobThCwh5TxzVXFM2qpEirerZ1aY+At70aFPMo1r2oQhIKZ4aGFT2SW8g8AEMK0SNsEx0J9/gI3HabyuuIFzYWODFxcNnAZVBwq0dCoADXd3QkBNi+7s02e0HzHmBbBdOMBJaeIt5S0DyNc6h7YoMWhKW26u43AakQl2+iTqr7HPsxQ7R4Xo3xW0hiPkCYPkB1vub74GBZCcxVxuwrNvsOlHY3U8VGE1cnUCI5Jp6JiTPHkww3PIh+DX6RjzI/7tBlRDC1YCrRIRKT7JFoZlOepG/FuIQI2bVsHV5iOUl4riuCMhlat71UVdnU6OQK8AcACD/vdSmjmcwuvDCWxMpoRq9MoAg4I16GfXM3e4Svd2yl/7Rjlkp7nP9OmQEP8m3N/dHncJGj7puV+jGZFF12gOYhN235aRvw/sAr+9cmE4nWc2bfe82FsrxHu9BfqDgxFwMVihy253y2rrwr7iPjDzEbcae+B4En7nTjhbYmt+OzfG5f0/evkFuOSFM3huWWmAvyRrznbvyIY2Cbn8qdm960Sw2O2Pa6kAa11SCesWr9J+b5exmwTOgzAHyOur27fvuHaBw+G4RMfFert8h78BqmCJbQ==

[Shyam-Chen]

<template v-if="pane.slots.label">
  <component :is="pane.slots.label"></component>
</template>

<template v-else>{{ pane.props?.label }}</template>

[T0miii]

Awesome , it can be as simples as that. Thank a lot.