🐛 BUG: Bugs with Svelte - Loses reactivity inside a component affected by JavaScript, slots not behaving correctly.

[TomSmedley]

What version of astro are you using?

0.22.18

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

Firstly, Reactivity isn't working inside the CounterWrapper because CounterWrapper is using JavaScript. For my project I have a few Svelte components that are used for animation such as a FadeUp.svelte in the example provided CounterWrapper.svelte is just that.

Secondly, there seems to be an issue around slots. I'm trying to create an accordion but if the accordion is closed the slot remains empty.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-utalnd?file=src/pages/index.astro

[jonathantneal]

Yes, I can confirm this issue. It is an issue with nesting components within an Astro file. The current workaround is to put all of the Svelte nesting within a .svelte file.

[matthewp]

Here's an updated example of this issue: https://stackblitz.com/edit/github-utalnd-erlrmt?file=astro.config.mjs,package.json,src%2Fpages%2Findex.astro

Donut islands like this are supported within Solid, but not within other frameworks. This issue seems to be mostly a thing that islands need to enable to support.

Marking this issue as needing discussion as we need to decide who's responsibility it is for supporting nested islands, is it Astro's or the frameworks (as is the case with Solid at this time).

[FredKSchott]

Core team sync:

• we still want to support nested islands ("not willing to give up on this just yet")
• Solid supports this, but unclear if React, others do and even can, more investigation needed.
• Suggestion if we can't get 100% support: document nested islands as not supported, but make it clear that it's something we want to support in the future. (Possibly also covered via linting? compiler warning?)

[matthewp]

Closed by #3455