$$slots is empty object if using customElement: true

[imsamtar]

When customElement option is set to true $$slots is empty object

here is my use case

<svelte:options tag="my-button" />

<script>
   onMount(() => {
      console.log($$slots);
   });
</script>

{#if $$slots.lefticon}
   <span>
	<slot name="lefticon" />
   </span>
{/if}

<span>
   <slot />
</span>

{#if $$slots.icon}
   <span>
	<slot name="icon" />
   </span>
{/if}

[jstrother]

How are you using it in the parent component? My understanding is that $$slots will only have anything in it IF the parent component passes any through.

[imsamtar]

@jstrother

I am using it like this

<my-button>
   <span slot="lefticon">L</span>
   Hello World!
   <span slot="icon">R</span>
</my-button>

[jstrother]

It looks to me like you're doing everything correctly. I remembered seeing something about custom elements causing issues and saw this issue #6164 that seems to be related. There are a few links there that could help out.

[YamiOdymel]

Are these two (#6059 with this) the same issue? I'm currently facing the same issue and it's more like the $$slots variable is not reactive when customElement was set as true.

[tanhauhau]

$$slots is not supposed to be reactive.

as per the original issue title, this is a duplicate of #5594, and should have been fixed in v3.29.5

[YamiOdymel]

Guess I was wrong, but the issue doesn't get fixed.

I'm using the same example code from the issue you mentioned above with "svelte": "^3.37.0"

<svelte:options tag="my-wc"/>

<script>
$: console.log($$slots);
</script>

<slot name="foo"></slot>

<my-wc>
    <span slot="foo">Foobar</span>
</my-wc>

[YamiOdymel]

Problem solved by adding defer to <script> tag, to get $$slots working it requires the DOM to be loaded first.

[tytusplanck-8451]

$$slots is not supposed to be reactive.

as per the original issue title, this is a duplicate of #5594, and should have been fixed in v3.29.5

@tanhauhau just out of curiosity, what's the reasoning behind $$slots not being reactive? It would help me out personally when I need to hide/show content based on something being in the slots or not.

i.e. if the implementer doesn't provide something in the slot, showing some empty state message in my UI.

[login2030]

$$slots is still an empty object. Even if there is a defer in the script tag =(