Replace target instead of appending to it #6
Description
When Svelte hydrates, it appends a child component to its parent. In other words, it nests the new component inside the existing component.
How it currently works
So if you have a component like this:
<div>My component</div>...and a page like this:
<body>
<main id='target'>
<p>some content</p>
<main>
</body>...the result after mounting would be:
<body>
<main id='target'>
<p>some content</p>
<div>My component</div>
<main>
</body>I believe it puts the new component after existing children elements.
There have been several discussions about replacing the parent element instead of appending to it:
- Replace top-level
<html>element: Can't replace top-level HTML element when hydrating sveltejs/svelte#5547 - Replace the contents of a target in Svelte instead of appending to children: https://stackoverflow.com/questions/61640429/how-to-replace-the-contents-of-a-target-in-svelte-instead-of-appending-to-childr
- Replace target instead of appending to it: Replace target instead of appending to it sveltejs/svelte#1549
- Replace target node when mounting component: Replace target node when mounting component sveltejs/svelte#537
- Better Hydration: Better hydration sveltejs/svelte#4308
Some of the worry around replacing elements is that it's expensive and destructive to other child elements that potentially exist already in the dom:
Destroying existing child element
So if you have a component like this:
<div>My component</div>...and a page like this:
<body>
<main id='target'>
<p>some content we want to get rid of</p>
<main>
</body>...the result after mounting would be:
<body>
<div>My component</div>
</body>You could potentially check that the elements that are being replaced are the same as the hydrated elements, but that could be a lot of work and potentially slow down performance. For Plenti we're just creating HTML fallbacks that should exactly mirror the hydrated components at their initial state, so it shouldn't be destructive in any way.