如何告诉 svelte bundle 在现有页面中呈现的位置 dom

Question

我们知道可以在构建时定义要渲染 svelte 的目标。但是是否可以告诉捆绑包在 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 都不知道。

用例

我们在 svelte 中构建了一个表单。现在我们想将它添加到一个服务器端渲染页面，许多服务器端渲染页面甚至在一个服务器端渲染页面上多次。

Answer 1

如果你在服务器渲染它的那一刻必须渲染它（这样你的后端可以以某种方式解决这个问题）你可以在页面中创建一种配置对象：

<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;

Answer 2

它帮助了我。在 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;

https://svelte.dev/docs#Client-side_component_API

如何告诉 svelte bundle 在现有页面中呈现的位置 dom

How to tell svelte bundle where to render in existing page dom

svelte

svelte-3