Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Custom Element slots are never rendered #3128

Closed
cam-stitt opened this issue Jun 28, 2019 · 17 comments · Fixed by #8457
Closed

Nested Custom Element slots are never rendered #3128

cam-stitt opened this issue Jun 28, 2019 · 17 comments · Fixed by #8457

Comments

@cam-stitt
Copy link

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
Copy link
Author

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
Copy link
Author

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
Copy link
Author

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

@cam-stitt cam-stitt changed the title this.$$.slotted is never set Nested Custom Element slots are never rendered Jul 3, 2019
@cam-stitt
Copy link
Author

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
Copy link

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
Copy link

Ashot-KR commented Jul 25, 2019

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

@cam-stitt
Copy link
Author

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
Copy link
Author

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

@northkode
Copy link

just tried in svelte 3.9.2 and this is not resolved.

Getting an empty container for a nested component.

@cam-stitt
Copy link
Author

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
Copy link

campbeln commented Feb 4, 2020

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 :(

@campbeln
Copy link

campbeln commented Feb 6, 2020

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

I've updated the most recent version of Svelte with the changes per 0c397ae (sans the /examples/ changes as those file don't seem to be present any longer) here: https://github.com/campbeln/svelte

Unfortunately... these changes don't seem to fix the issues any longer.

campbeln added a commit to campbeln/svelte that referenced this issue Feb 10, 2020
@matt-shine
Copy link

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

We dropped svelte because of this.

@campbeln
Copy link

campbeln commented Feb 13, 2020

@matt-shine A fix for current build is contained in 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 - #3136 (comment) .

@mlawd
Copy link

mlawd commented Jan 21, 2021

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

@stale
Copy link

stale bot commented Jun 26, 2021

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.

@stale stale bot added the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 27, 2021
@baseballyama baseballyama added this to the 4.x milestone Feb 26, 2023
dummdidumm added a commit that referenced this issue May 2, 2023
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 wrapper is introduced which wraps a Svelte component constructor and returns a HTML element constructor. This has a couple of advantages:

- component can be used both as a custom element as well as a regular component. This allows creating one wrapper custom element and using regular Svelte components inside. Fixes #3594, fixes #3128, fixes #4274, fixes #5486, fixes #3422, fixes #2969, helps with sveltejs/kit#4502
- all components are compiled with injected styles (inlined through Javascript), fixes #4274
- the wrapper instantiates the component in `connectedCallback` and disconnects it in `disconnectedCallback` (but only after one tick, because this could be a element move). Mount/destroy works as expected inside, fixes #5989, fixes #8191
- the wrapper forwards `addEventListener` calls to `component.$on`, which allows to listen to custom events, fixes #3119, closes #4142 
- some things are hard to auto-configure, like attribute hyphen preferences or whether or not setting a property should reflect back to the attribute. This is why `<svelte:options customElement={..}>` can also take an object to modify such aspects. This option allows to specify whether setting a prop should be reflected back to the attribute (default `false`), what to use when converting the property to the attribute value and vice versa (through `type`, default `String`, or when `export let prop = false` then `Boolean`), and what the corresponding attribute for the property is (`attribute`, default lowercased prop name). These options are heavily inspired by lit: https://lit.dev/docs/components/properties. Closes #7638, fixes #5705
- adds a `shadowdom` option to control whether or not encapsulate the custom element. Closes #4330, closes #1748 

Breaking changes:
- Wrapped Svelte component now stays as a regular Svelte component (invokeing it like before with `new Component({ target: ..})` won't create a custom element). Its custom element constructor is now a static property named `element` on the class (`Component.element`) and should be regularly invoked through setting it in the html.
- The timing of mount/destroy/update is different. Mount/destroy/updating a prop all happen after a tick, so `shadowRoot.innerHTML` won't immediately reflect the change (Lit does this too). If you rely on it, you need to await a promise
@dummdidumm
Copy link
Member

Closed via #8457, to be released in Svelte 4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.