svelte: Nested Custom Element slots are never rendered
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?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 17 (1 by maintainers)
Commits related to this issue
- Reapply #3128 changes to new interfaces. — committed to campbeln/svelte by campbeln 4 years ago
- Further updates to #3128 that works using examples contained within #4402 — committed to campbeln/svelte by campbeln 4 years ago
- feat: custom elements rework (#8457) This is an overhaul of custom elements in Svelte. Instead of compiling to a custom element class, the Svelte component class is mostly preserved as-is. Instead a ... — committed to sveltejs/svelte by dummdidumm a year ago
Is there any update on this? Trying to get my team to move to using Svelte for custom elements but it’s an absolute no-go whilst this is still open
We dropped svelte because of this.
Some further observations. It seems that
$$slottedhas 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.
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.
@matt-shine A fix for current build is contained in https://github.com/sveltejs/svelte/compare/master...campbeln:master and an example of working code is included in #4402.
NOTE: Not certain if change to line 23 of src/compiler/compile/render_dom/index.ts is necessary. Also not certain if this also breaks sveltestrap as noted here - https://github.com/sveltejs/svelte/pull/3136#issuecomment-522310087 .