<slot let:name={value}> not working in customElement (nor is {#if}, {#each}, etc.)

[campbeln]

Custom elements as defined by <svelte:options tag="custom-element" /> + rollup.config.js's plugins: [ svelte( { customElement: true } ) ] are not parsing incoming slot definitions. For example:

<!-- customElement.svelte -->
<svelte:options tag="custom-element" />
<script>
	let hovering = null;
	function enter() {
		hovering = true;
	}
	function leave() {
		hovering = false;
	}
</script>
<div on:mouseenter={enter} on:mouseleave={leave}>
	<slot hovering={hovering}>default slot content hovering value = [{hovering}]</slot>
</div>


<!-- index.html -->
<custom-element let:hovering={status}>
	<div>hovering = [{status}]</div>
</custom-element><!-- renders unparsed as `hovering = [{status}]` and never changes on hover events -->

<custom-element></custom-element><!-- renders parsed as `default slot content hovering value = [null]` with `[null]` changing to `[true]`/`[false]` as the user hovers -->

This issue is keeping us from moving to Svelte.

[campbeln]

On render:

After Mouseover:

The top hovering = [{status}] definition registers the mouseover events (as evidenced by adding console.log(hovering) to enter() and leave()) but the incoming slot fails to be parsed as shown in the screenshots above.

[campbeln]

Nested customElements are parsed correctly:

<!-- customElement2.svelte -->
<svelte:options tag="custom-element2" />

<script>
	let hovering = null;
	function enter() {
		hovering = true;
		console.log(hovering);
	}
	function leave() {
		hovering = false;
		console.log(hovering);
	}
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
	<custom-element let:hovering={hovering}>nested custom element, hovering = [{hovering}]</custom-element>
	<slot hovering={hovering}>default slot content hovering value = [{hovering}]</slot>
</div>

<!-- index.html -->
<custom-element let:hovering={hovering}>
	<div>hovering = [{hovering}]</div>
</custom-element>

<custom-element></custom-element>

<custom-element2></custom-element2>

On render:

On Mouseout:

So it seems that it's only slot definitions that are defined within HTML files (and it seems that #3128 has been fixed by master...campbeln:master ).

[campbeln]

Correcting image above (but github loves to break code blocks on edit, hence a new comment).

On render:

[q42jaap]

@campbeln Did you ever find a workaround or fix for this?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SergkeiM]

Hi @campbeln

I don't think they should, yes is a nice feature, but is a feature of Svelte not Web Components (Custom Elements)

Custom element can't do this type of things. Slot is rendered by browser built-in sloting feature, not Svelte. (this will require to include Svelte Compiler (aka Runtime Compiler) in browser (to support {}, {#if} and all other methods)

[dummdidumm]

Using a let: binding on a custom element isn't supported, because the custom element spec does have nothing like this built-in. When using Svelte components as custom elements, we're constrained to what custom elements can do - therefore closing.