Top-level raw {@html} hydrated incorrectly

[Conduitry]

Describe the bug
Components containing a raw {@html} tag at the top level are hydrated incorrectly - the existing HTML is not removed.

Logs
None.

To Reproduce
Attempt to hydrate a component containing a top-level {@html} tag against some existing HTML.

Expected behavior
The existing HTML should be replaced, but it is not.

Stacktraces
None

Information about your Svelte project:

• Firefox 74
• Windows 10
• Svelte 3.19.2
• Rollup

Severity
Inconvenient. For my case, I can wrap it in another element without affecting much.

Additional context
There appears to be a disabled and outdated test for this here. If I enable it and add the required export let raw; prop declaration to the component, the test fails with the same thing I'm seeing in practice - that there are two copies of the HTML upon hydration.

I'm also not entirely certain the problem I'm asking to be fixed here is well defined. How can we know how much the {@html} should 'consume' during hydration?

[tanhauhau]

I have a fix in #4444

[Conduitry]

Hm. In my actual app, #4444 doesn't seem to fix the issue. And when I enable the test I mentioned above, it's still failing with the duplicated HTML.

[tanhauhau]

hmm.. okay, can provide a repro that i can take a look?

[Conduitry]

I've created a repo that shows this and something else I noticed while putting together the repro. Take a look at the Git history as well, not just the latest HEAD.

[tanhauhau]

Okay, I see what's the issue here right now. We need to differentiate whether the Component is a root component or not.

For example:

// Foo.svelte
<div>hello</div>

// App.svelte
<Foo />
<Foo />

// html
<div>hello</div>
<div>hello</div>
<div>hello</div>

The first Foo instances is given 3 <div>s. It should just hydrate the 1st div and leave the rest of the divs alone. same goes for the 2nd Foo.

Given the same logic, App should hydrate only 2 <div>s and leave the 3rd div alone, because it should leave it for its sibling to hydrate.

However, if App is the root component, we want App to remove the rest of the siblings.

But for the case of App, assuming it is a root component, it is given a target element, and to claim the children of the target element, which is the 3 div.

So, an expected behavior, is that, after the claim, it should remove the rest of the children that was not claimed.

[tanhauhau]

To determine whether it is a root component or not, we rely on options.target

[Conduitry]

This has been fixed in 3.20.0.