svelte - 如何在 Svelte 中直接挂载 HTMLElement？

Question

我正在使用一些返回 HTML 元素的外部代码，最好嵌入它而无需通过 JavaScript 管理加载和所有内容(即 appendChild/removeChild )。现在我正在使用 {@html element.outerHTML}，但这似乎不适合 HTML 字符串的往返:

<script>
  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async function someCall() {
    await sleep(1000);
    const p = document.createElement("p");
    p.innerText = "hello!";
    console.log(p);
    return p;
  }

  let data = someCall();
</script>

<div>
  {#await data}
    <p>Loading data...</p>
  {:then result}
    {@html result.outerHTML}
  {/await}
</div>

我要找的可能是这样的

<div>
  {#await data}
    <p>Loading data...</p>
  {:then result}
    {result}
  {/await}
</div>

但这不起作用(因为它字符串化了元素)。

Answer 1

您可以使用 bind:this 附加 HTML

<script>
    import { onMount } from 'svelte';

    function sleep(ms) {
      return new Promise((resolve) => setTimeout(resolve, ms));
    }

    let elem;
    
    onMount(async () => {
      await sleep(1000);
      const p = document.createElement("p");
      p.innerText = "hello!";
      elem.appendChild(p) 
    });
</script>

<div bind:this={elem}> 
</div>