调用新组件(｛target｝(将组件附加到目标，我想用新组件替换目标的所有旧内容。我该怎么做？
如果要对服务器渲染的标记进行水合，最好使用hydrate: true选项(此处为文档(。
如果target以前被Svelte组件占用，那么最好调用该组件的$destroy()方法。
否则，最简单的方法就是清空target元素：
target.innerHTML = '';
new Component({ target });
function replaceTarget (target) {
const component = new MySvelteComponent({
target: target.parentElement,
anchor: target,
});
target.remove();
}
这将在目标元素(在目标的父元素中(之前预处理新组件，然后删除目标。
anchor的相关文档：
https://svelte.dev/docs/client-side-component-api#creating-a成分
与target === <body>一起使用可能不是一个好主意。
我使用此方法用一个苗条的组件替换DOM元素，同时保留大部分属性(id、名称等(
export function replaceTargetByComponent(target, Component, options) {
const frag = document.createDocumentFragment()
var props = {
id: target.id,
name: target.name,
value: target.value,
checked: target.checked,
readonly: target.readOnly,
...target.dataset,
...options,
}
const component = new Component({
target: frag,
props: props,
})
target.replaceWith(frag)
return component
}
我也遇到了同样的问题，我单独创建了HTML回退，只是想用完全镜像静态HTML的客户端Svelte组件来水合整个dom。然而，使用文档中的方法创建了两个嵌套的<html>元素，因为它是附加到目标而不是替换它
抓住"；"父"；我想替换的元素似乎对我有效：
import App from './App.svelte';
let target = document.querySelector('html').parentNode;
new App({
target: target,
hydrate: true
});
在我的具体情况下，可以更简单地写为：
import App from './App.svelte';
new App({
target: document,
hydrate: true
});
替换顶级<html>元素会导致一些控制台错误，但以下是屏幕截图和更多详细信息，说明我们如何在项目中实现它，以防有帮助：https://github.com/plentico/plenti/issues/65#issuecomment-696391302
@azmeuk的回答真是太棒了！我使用这个函数，尽管添加了一点。我没有列出要返回的属性，而是编写了一个函数来自动获取元素的所有元素。
export function replaceTargetByComponent(target, Component, options) {
const frag = document.createDocumentFragment();
const tagData = {
//attributes
attrs: get_attrs(target),
//all other opts
...options,
};
const component = new Component({
target: frag,
props: { tagData },
});
target.replaceWith(frag);
return component;
}
// get all attributes of a given element
function get_attrs(el) {
return el.getAttributeNames().reduce((acc, name) => {
return { ...acc, [name]: el.getAttribute(name) };
}, {});
}