Nested Custom Element slots are never rendered

[cam-stitt]

This is more of an observation that anything at this point. I have been doing some digging into some CustomElement issues that have surface through a Svelte 2 -> 3 migration. One thing I noticed is that this.$$.slotted found here doesn't ever seem to be set. Is there something obvious I am missing?

[cam-stitt]

Some further observations. It seems that $$slotted has come from _slotted. That used to be set here in v2, but it's never set in v3.

I think that the output should include this if there are slots, however my component has a slot with no props, so this is not being generated. Will continue investigating.

[cam-stitt]

Another bit of investigation uncovered that in svelte v2, the create_${slot_name}_slot methods were being called (as createFragment()) when being passed to a component (found here.

Now, the function is passed down instead of called, and it is then used here and here.

[cam-stitt]

I have further evidence of this problem at this example repository. https://github.com/cam-stitt/svelte-nested-ce

[cam-stitt]

After even more investigation (as well as some silly things missed) I realised the following.

A nested component of a custom element does not get used as a custom element. However, the code is generated as a custom element. Therefore, the custom element lifecycle is never called and the slot disappears into oblivion. We either need to make the parent use the custom element through it's appropriate tag, or have the generated custom element include the Slot wrapper related methods.

[chrisshaw]

Ah, thank you, I pretty sure I'm running into the issue you uncovered as I posted on StackOverflow. Adding the link here in case the marginally additional context is helpful.

[Ashot-KR]

Also styles from style tag of nested elements won't render

[cam-stitt]

This is still a fairly significant issue (although it may be edge-case) for us. We have a production component library that makes heavy use of nested custom elements, and we cannot fully migrate to Svelte 3 until this is resolved. I have tried a number of times to investigate a fix, but I have failed to get a full grasp of a potential fix.

[cam-stitt]

I have what I believe to be a fix in #3136.

[northkode]

just tried in svelte 3.9.2 and this is not resolved.

Getting an empty container for a nested component.

[cam-stitt]

Any updates on this @Rich-Harris @Conduitry? It's a pretty significant issue to still have around. I validated that it is still a problem on the latest release.

[campbeln]

Any progress on this?

Happy to provide my example of this break, but in summary it involves making https://svelte.dev/examples#slot-props a customElement (svelte:options / customElement: true / etc.) and the rendering of the slot barfs out the unparsed raw HTML:

{#if active}
    [p]Active[/p]
{:else}
    [p]Inactive[/p]
{/if}

This is a major break that's keeping me from migrating to Svelte :(