从 HTML 字符串渲染 Svelte 组件

Question

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

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

似乎可以使用{@html my_html_string}. 有没有办法在 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选项传递给编译器。