问题描述
我们知道，可以在构建时定义要渲染的目标。但是有可能告诉捆绑包是在运行时（加载捆绑包时）在HTML文件中呈现。
<html>
<body>
<div id="id1"> </div>
<div id="id2"> </div>
<script>
// how to tell the bundle to load at id1 and id2
</script>
<script defer src='/mycustomsveltething/bundle.js'></script>
</body>
</html>
在构建时，我们对svelte-app加载的上下文一无所知，甚至对id也不了解。
用例
我们精巧地构建表格。现在，我们要将其添加到服务器端渲染的页面，许多服务器端渲染的页面，甚至在一个服务器端渲染的页面上添加多次。
解决方法
如果您必须在服务器渲染后立即渲染它（以便后端可以以某种方式解决），则可以在页面中创建某种配置对象：
<script>
window.myapp.renderTarget = 'id1';
</script>
<script defer src='/mycustomsveltething/bundle.js'></script>
，然后在应用程序本身中使用此值：
// main.js
import App from './App.svelte';
const app = new App({
target: window.myapp.renderTarget
});
export default app;
它帮助了我。 在 html 中
<script defer src='/mycustomsveltething/bundle.js'></script>
放在我需要的地方
<div id="id1"></div>
在js中
import App from './App.svelte';
const app = new App({
target: document.querySelector('#id1'),props: {
name: 'world'
}
});
export default app;