Question

我只是在为即将到来的项目研究Svelte框架。

我在想（这是项目要求）是否可以从服务器加载一些HTML字符串（使用fetch api）并将其动态插入到Svelte组件中。

似乎可以使用{@html my_html_string}输出HTML字符串。有没有办法在HTML字符串中包含实际Svelte元素的标签？

例如

<script>
    // import MyCustomElementHere....

    let my_html_string = 'Some text <MyCustomElement/> some more text';
</script>    

<p> {my_html_string} [somehow??] </p>

我当时想通过将组件转换为自定义元素（或类似元素）是可能的，但是我还没有设法完成这项工作（可能是因为我对框架还不了解）。

有人知道这是否真的可能吗？

Answer 1

无法执行类似{@html "<MyComponent/>"}的操作。这将要求生成的代码包含HTML解析器，这将大大增加包的大小。

但是，正如您所说，可以通过将<MyComponent>编译为名为<my-component>的自定义元素并使用该字符串来执行非常相似的操作。我们需要完成有关此工作的文档，但是基本上您需要向该组件添加一些元数据...

<svelte:options tag="my-component"/>

...然后将customElement: true选项传递给编译器。

Answer 2

我认为无法执行以下操作：

<script>
let comp="MyComponent"
</script>

<{comp} />

Answer 3

这是一个想法：您可以解析字符串以查找需要显示的自定义元素，然后执行以下操作：

<script>
    import MyCustomElemen from ...

    let my_html_string = 'Some text <MyCustomElement/> some more text';
    // assume u parsed it
    let element_to_use = MyCustomElement;
    let html1 = 'Some text ';
    let html2 = ' some more text'
    new element_to_use({
      target: document.getElementById("someId"),
      props: {
        // whatever your component needs
      }
    })
</script>    

<div>
  <div
    contenteditable="true"
    bind:innerHTML={html1}
  ></div>
  <div id="someId"></div>
  <div
    contenteditable="true"
    bind:innerHTML={html2}
  ></div>
</div>

我希望这个想法是可见的和有帮助的！

从HTML字符串渲染Svelte组件

3 个答案: