Using named slot is not working as I expected.

[gio-hernandez-saito]

Hello, I'm trying to create a card component with svelte.
I'm using unoCSS and sveltekit, and I faced a problem with using named slots.

let wrapperClassName = `flex flex-col justify-center gap-4`;
onMount(() => console.log($$slots))

<div class="{wrapperClassName}">
	{#if $$slots['header-above']}
		<div class="flex-none header-above-class">
			<slot name="header-above" />
		</div >
	{/if}
<!-- other codes ... -->
</div >

So, the code above is a BaseCard component, which has no styles. I want to activate inner div class only when the slot is used.
And the code below is StyledCard component.

// LayoutCard
<BaseCard passedProps="{baseCardProps}">
	<slot name="header-above" slot="header-above" />
<!-- other codes ... -->
</BaseCard>



// usage
<LayoutCard passedProps="{layoutCardProps}">
</LayoutCard>

But, if I use StyledCard component without an 'header-above' slot, the 'header-above-class' appears, which means the gap-4 is applied. And also, console.log($$slots) shows { header-above: true }

Is there any solution for that? I think I need to change LayoutCard logic.

[gio-hernandez-saito]

I figured out that this problem is discussed before here and here.

I think this is about $$slots with slot forwarding. Now I just added boolean flag to solve the issue, and it worked although the code is not that good as I expected. While using Svelte 4, is there no choice but to use a workaround like this?

	{#if $props.hasHeaderAbove && $$slots['header-above']}
		<Base className="flex-none">
			<slot name="header-above" />
		</Base>
	{/if}

[paoloricciuti]

In this case

// LayoutCard
<BaseCard passedProps="{baseCardProps}">
	<slot name="header-above" slot="header-above" />
<!-- other codes ... -->
</BaseCard>



// usage
<LayoutCard passedProps="{layoutCardProps}">
</LayoutCard>

you are always passing a slot to BaseCard...i think if you add the same if in LayoutCard it should work

// LayoutCard
<BaseCard passedProps="{baseCardProps}">
        {#if $$slots['header-above']}
            <slot name="header-above" slot="header-above" />
        {/if}
<!-- other codes ... -->
</BaseCard>



// usage
<LayoutCard passedProps="{layoutCardProps}">
</LayoutCard>

[gio-hernandez-saito]

Thanks for your reply, I've tried it before, but it didn't work.
An error 'Svelte: Element with a slot='...' attribute must be a child of a component or a descendant of a custom element' occurred..

[paoloricciuti]

Ugh yeah this is a problem... it's a bit verbose but you can do this instead

// LayoutCard
{#if $$slots['header-above']}
    <BaseCard passedProps="{baseCardProps}">
        <slot name="header-above" slot="header-above" />
     <!-- other codes ... -->
    </BaseCard>
{:else}
    <BaseCard passedProps="{baseCardProps}">
     <!-- other codes ... -->
    </BaseCard>
{/if}




// usage
<LayoutCard passedProps="{layoutCardProps}">
</LayoutCard>