Javascript “真正发出”；生的；苗条的html

我正在接收来自无头CMS的原始html片段，我需要将其呈现为Sapper应用程序中的原样

这也包括这样的情况：我收到一个开始标记和相应的结束标记，作为两个HTML片段，我在它们之间添加了一个苗条的组件

从“/MyComponent.svelte”导入MyComponent
//来自headless CMS的示例片段
常量前缀='
'
常量后缀='
'
{@html前缀}
{@html后缀}

看

但是，Svelte希望使用@html呈现的每个项目都是自包含的元素，并尝试“修复”常见错误。例如，它将向前缀片段添加结束标记，将

-部分移出

p

总的来说，有没有办法避免这种行为？或者更具体地说，是否可以用任意原始HTML围绕渲染组件

---

作为侧节点：它作为sapper应用程序运行，服务器端呈现的页面版本正确地发出原始HTML。当客户端渲染开始时，行为会发生变化。

您可以使用插槽，通过将组件包装到另一个组件中来实现类似的结果。这是官方文件：

这是一种邪恶的方式

免责声明在其脚下移动苗条管理元素不可能是一个好主意，我完全无法理解您接下来可能会遇到哪些不良副作用

我特别建议不要在

{#each}

块中使用此选项，尤其是键控块，因为Svelte希望对其元素进行重新排序，如果它们不在DOM中预期的位置，则可能会感到不安

。。。但也许它能让你在简单的情况下摆脱困境。你是法官

我的想法是用一个额外的元素来呈现完整的连接字符串（前缀+后缀），我可以抓取并替换为一个已经由Svelte在这个片段之外独立呈现的组件

诀窍如下：

{@html前缀+''+后缀}

下面是实现该技巧的示例组件：

从“svelte”导入{afterUpdate}
导出let前缀
导出let后缀
包起来
让内容
更新后（（）=>{
const vslot=wrap.querySelector（“#vslot”）
vslot.parentNode.replaceChild（内容，vslot）
})
{@html前缀+''+后缀}

你会这样消费它：

---

我知道（并使用）插槽，但我不确定它们在这里能帮我什么忙。html片段是服务器返回的字符串。它们本身不是可以使用插槽机制的组件。这个可以帮助您吗？：

const prefix='
；常量后缀='
'；const getcomposited=（）=>{return prefix+''+suffix；}{@html getcomposited（）}

这不起作用。Svelte不会将“”解释为要实例化的组件。最终的HTML类似于

，根本不涉及MyComponent。