How to replace the contents of a target in Svelte instead of appending to children?

Question

Calling new Component({ target }) appends component to target, I want to replace all the old content of the target with the new component. How can I do that?

Answer 1

If you're hydrating server-rendered markup, it's better to use the hydrate: true option (docs here).

If target was previously occupied by a Svelte component, it's better to call that component's $destroy() method.

Otherwise, the simplest way is to just empty out the target element:

target.innerHTML = '';
new Component({ target });