Dynamic components removed when hydrating

[jimafisk]

Describe the bug
If you create HTML fallbacks that exactly mirror your client app and use hydration to enhance elements with JS, the dynamic components (created like <svelte:component this={} />) get completely removed from the page and then added back in. This creates a cumulative layout shift resulting in what looks like a flash of content to the visitor.

Logs
N/A

To Reproduce
I can't demonstrate the hydration with the REPL, but you can see this with the default starter of our project: https://github.com/plentico/plenti.

Expected behavior
I expect the HTML elements that existed previously to persist and hydration should only attach event handlers.

Stacktraces
N/A

Information about your Svelte project:

• Your browser and the version:

  • Chrome Version 85.0.4183.102 (Official Build) (64-bit)
  • Firefox Version 81.0 (64-bit)

• Your operating system: Ubuntu Linux 18.04 LTS

• Svelte version: 3.23.2

• Whether your project uses Webpack or Rollup: Neither, we're hitting the Svelte compiler directly

Severity
We use dynamic components to create all the different pages for the https://github.com/plentico/plenti framework. For us it's important, but I recognize that our project is rather small.

Additional context
Possibly related to the open issue for better hydration: #4308

[benmccann]

Yeah, this is basically a duplicate of that issue. There's also problems with iframes refreshing, videos replaying, etc.

[jimafisk]

Ok sounds good, thanks for the quick reply @benmccann!

One thing I wanted to note was that I just created a test repo so folks could take a look without having to install plenti: https://github.com/jimafisk/svelte-dynamic-components. Interestingly I don't see the same problem there, which leads me to believe that maybe I have an issue with how I'm passing the component constructor values to this in my framework.

[jimafisk]

Just wanted to drop a quick note that my specific issue turned out to be related to something I was doing incorrectly with clientside routing: lukeed/svelte-demo#13. Without that specific problem, the dynamic component loads correctly as shown in this example repo: https://github.com/jimafisk/svelte-dynamic-components. Thanks!