Nested Custom Element slots are never rendered #3128

cam-stitt · 2019-06-28T07:14:26Z

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?

The text was updated successfully, but these errors were encountered:

cam-stitt · 2019-06-28T07:25:06Z

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 · 2019-07-02T00:15:41Z

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 · 2019-07-03T03:40:37Z

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

cam-stitt · 2019-07-04T12:40:38Z

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 · 2019-07-09T17:22:53Z

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 · 2019-07-25T08:09:35Z

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

cam-stitt · 2019-08-05T04:21:57Z

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 · 2019-08-12T03:17:11Z

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

northkode · 2019-09-08T04:26:15Z

just tried in svelte 3.9.2 and this is not resolved.

Getting an empty container for a nested component.

cam-stitt · 2019-10-16T22:15:51Z

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 · 2020-02-04T09:41:38Z

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 · 2020-02-06T06:31:42Z

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.

matt-shine · 2020-02-12T03:33:49Z

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

We dropped svelte because of this.

…within sveltejs#4402

campbeln · 2020-02-13T07:07:02Z

@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 · 2021-01-21T15:04:44Z

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 · 2021-06-26T21:03:45Z

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.

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 · 2023-05-02T10:48:43Z

Closed via #8457, to be released in Svelte 4

cam-stitt mentioned this issue Jun 29, 2019

3128: Test to show nested slots fails #3136

Closed

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

Conduitry added the custom element label Oct 17, 2019

campbeln mentioned this issue Feb 5, 2020

Ability to define slots as <template>'s with proper DOM hydration #4370

Closed

campbeln added a commit to campbeln/svelte that referenced this issue Feb 10, 2020

Reapply sveltejs#3128 changes to new interfaces.

3898b05

campbeln added a commit to campbeln/svelte that referenced this issue Feb 13, 2020

Further updates to sveltejs#3128 that works using examples contained …

dd3d0d6

…within sveltejs#4402

campbeln mentioned this issue Feb 13, 2020

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

Closed

stale bot added the stale-bot label Jun 26, 2021

pngwn added the temp-stale label Jun 26, 2021

stale bot removed the stale-bot label Jun 26, 2021

pngwn added stale-bot and removed temp-stale labels Jun 27, 2021

stale bot removed the stale-bot label Jun 27, 2021

pngwn added the temp-stale label Jun 28, 2021

sawden mentioned this issue Jul 1, 2021

The Svelte "customElement" feature is not production ready yet ! #6481

Closed

dummdidumm removed the temp-stale label Jul 10, 2021

baseballyama added this to the 4.x milestone Feb 26, 2023

dummdidumm mentioned this issue Apr 6, 2023

feat: custom elements rework #8457

Merged

5 tasks

dummdidumm closed this as completed May 2, 2023

patricknelson mentioned this issue May 4, 2023

Slotted content for Web Component nested inside of a Svelte component is not applied to the Web Component #1689

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nested Custom Element slots are never rendered #3128

Nested Custom Element slots are never rendered #3128

cam-stitt commented Jun 28, 2019

cam-stitt commented Jun 28, 2019

cam-stitt commented Jul 2, 2019

cam-stitt commented Jul 3, 2019

cam-stitt commented Jul 4, 2019

chrisshaw commented Jul 9, 2019

Ashot-KR commented Jul 25, 2019 •

edited

Loading

cam-stitt commented Aug 5, 2019

cam-stitt commented Aug 12, 2019

northkode commented Sep 8, 2019

cam-stitt commented Oct 16, 2019

campbeln commented Feb 4, 2020 •

edited

Loading

campbeln commented Feb 6, 2020 •

edited

Loading

matt-shine commented Feb 12, 2020

campbeln commented Feb 13, 2020 •

edited

Loading

mlawd commented Jan 21, 2021

stale bot commented Jun 26, 2021

dummdidumm commented May 2, 2023

Nested Custom Element slots are never rendered #3128

Nested Custom Element slots are never rendered #3128

Comments

cam-stitt commented Jun 28, 2019

cam-stitt commented Jun 28, 2019

cam-stitt commented Jul 2, 2019

cam-stitt commented Jul 3, 2019

cam-stitt commented Jul 4, 2019

chrisshaw commented Jul 9, 2019

Ashot-KR commented Jul 25, 2019 • edited Loading

cam-stitt commented Aug 5, 2019

cam-stitt commented Aug 12, 2019

northkode commented Sep 8, 2019

cam-stitt commented Oct 16, 2019

campbeln commented Feb 4, 2020 • edited Loading

campbeln commented Feb 6, 2020 • edited Loading

matt-shine commented Feb 12, 2020

campbeln commented Feb 13, 2020 • edited Loading

mlawd commented Jan 21, 2021

stale bot commented Jun 26, 2021

dummdidumm commented May 2, 2023

Ashot-KR commented Jul 25, 2019 •

edited

Loading

campbeln commented Feb 4, 2020 •

edited

Loading

campbeln commented Feb 6, 2020 •

edited

Loading

campbeln commented Feb 13, 2020 •

edited

Loading