从 HTML 字符串渲染 Svelte 组件

Posted 2023-03-07

【中文标题】从 HTML 字符串渲染 Svelte 组件

【英文标题】：Rendering Svelte components from HTML string

【发布时间】：2019-11-26 02:59:47

【问题描述】：

我只是在为即将到来的项目研究 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>

我认为这可能通过将组件转换为自定义元素（或其他东西）来实现，但我还没有设法完成这项工作（可能是因为我对框架还不够了解）。

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

【参考方案1】：

不可能做类似@html "<MyComponent/>" 的事情。这将需要生成的代码包含一个 HTML 解析器，这会显着增加包大小。

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

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

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

【讨论】：

感谢您的回答——正如我所怀疑的那样！对自定义元素中的 Svelte 功能可以做什么有进一步的限制吗？ （特别是，Svelte Store 是否可以在自定义元素中工作？我试过了，但似乎没有，但我可能又完全错了！）

Svelte 自定义元素的功能应该与普通组件相同——如果不是，那就是一个错误！对github.com/sveltejs/svelte/issues的repro有问题会很棒

进一步思考，这可能是我的设置（我混合了 Svelte 组件和自定义元素 - 自定义组件只是为了从 HTML 字符串呈现）。 Svelte 组件和自定义元素是否以这种方式协同工作，包括所有 Svelte 功能？ （在这种情况下，我应该如何设置我的汇总文件？）

【参考方案2】：

我认为不可能这样做：

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

<comp />

【参考方案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>

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

【讨论】：

正如 Rich 所提到的，在代码中包含 HTML 解析器并不是一个好主意，但如果您从 API 接收到的字符串保持小而简单，这不会是什么大问题解析它们。