如何在Svelte中直接挂载HTMLElement？

我正在使用一些返回 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>

但这不起作用（因为它对元素进行了字符串化）。

您可以使用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>