You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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><mainid='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.
The text was updated successfully, but these errors were encountered:
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:
...and a page like this:
...the result after mounting would be:
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:
<html>element: Can't replace top-level HTML element when hydrating sveltejs/svelte#5547Some 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:
...and a page like this:
...the result after mounting would be:
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.
The text was updated successfully, but these errors were encountered: