将 Svelte 生成的节点注入静态 DOM

Question

我有一个静态HTML文件，并希望用动态Svelte组件来增强它：

<ul id="list">
<li>first</li>
<!-- dynamic list items should be added in between static ones -->
<li>last</li>
</ul>

(这是一个简化的示例;"first"和"last"元素更复杂，在Svelte中重新生成它们不是一种选择。

import List from "./List.svelte";
new List({
target: document.querySelector("#list"),
props: {
items: ["foo", "bar"]
}
});

<script>
let items;
</script>
{#each items as item}
<li>{item}</li>
{/each}

不过，这会将动态项附加到列表的末尾。有没有一种惯用的声明性方法将它们插入中间？

我能想到的唯一解决方案是繁琐的非声明式 DOM 操作：

<script>
import { onMount } from "svelte";
let items;
onMount(() => {
let container = ref.parentNode;
container.removeChild(ref);
// manually change order
let last = container.querySelectorAll("li")[1];
container.appendChild(last);
})
</script>
<span bind:this={ref} hidden />
{#each items as item}
<li>{item}</li>
{/each}

(我什至不确定这是否有效，因为不允许span元素作为直接ul后代，加上手动丢弃ref可能会混淆 Svelte？

Answer 1

您可以使用anchor选项挂载与特定节点相邻的组件：

import List from "./List.svelte";
const target = document.querySelector("#list");
const anchor = target.lastChild; // node to insert component before
new List({
target,
anchor,
props: {
items: ["foo", "bar"]
}
});

演示：https://svelte.dev/repl/1a70ce8abf2341ee8ea8178e5b684022?version=3.12.1

完整的 API 记录在此处：https://svelte.dev/docs#Client-side_component_API