How could import an svelte component to a "target" different to body?
https://github.com/sveltejs/template/blob/master/src/main.js
I am trying the next:
import App from './App.svelte';
export default new App({ target: document.body.div});
How could I export multiple componentes to different targets?
import App1 from './App1.svelte';
import App2 from './App2.svelte';
export default new App1({ target: document.body.div1});
export default new App2({ target: document.body.div2});
You can export a "const" object instead "default" to html element #ids with document.getElementById() or body tag names with document.getElementsByTagName()
import App1 from './App1.svelte';
import App2 from './App2.svelte';
export const app1 = new App1({ target: document.getElementById("div1") });
export const app2 = new App2({ target: document.getElementById("div2") });
You can use named exports, like:
import App1 from './App1.svelte';
import App2 from './App2.svelte';
export const app1 = new App1({ target: document.getElementById("app1")});
export const app2 = new App2({ target: document.getElementById("app2")});
And in Your html you need to have the following elements:
<div id="app1"></div>
<div id="app2"></div>
document.getElementById for getting the target element.