Svelte能否通过合法HTML代码渲染自定义组件？

Svelte不能直接通过{@html}渲染普通的Svelte自定义组件，原因和可行方案如下：

为什么你之前的方案不生效？ #

• 直接返回Svelte组件写法（如<MyComponent />）：{@html}只会解析原生HTML标签，Svelte组件标签属于框架专属语法，浏览器和{@html}都不会识别，只会当作未知元素处理。
• svelte:component：这是Svelte的内置模板语法，必须在Svelte模板中直接使用，无法通过字符串形式的HTML触发解析，{@html}不会处理这个特殊元素的逻辑。
• 自定义元素API未生效：大概率是没正确配置Svelte组件转为自定义元素的选项，或者未完成注册步骤。

可行的两种解决思路 #

1. 动态渲染组件（无需HTML字符串）

如果只是需要动态切换组件，完全不用{@html}，直接用svelte:component在模板中实现：

<script>
  import ComponentA from './ComponentA.svelte';
  import ComponentB from './ComponentB.svelte';

  let currentComponent = ComponentA; // 可根据业务逻辑动态切换
</script>

<svelte:component this={currentComponent} someProp="示例值" />

这种方式完全符合Svelte的响应式机制，支持组件的所有特性。

2. 将组件转为自定义元素（支持HTML字符串渲染）

如果必须通过HTML字符串渲染（比如内容来自后端接口），可以把Svelte组件打包为原生Web Components：

1. 在组件文件中添加自定义元素配置：

<script>
  export let message;
</script>

<div>{message}</div>

<svelte:options customElement={{ tag: 'my-custom-component' }} />

2. 编译并导入这个自定义元素后，HTML字符串中的<my-custom-component message="你好"></my-custom-component>就可以通过{@html}正常渲染，浏览器会自动实例化这个自定义元素。

总结 #

普通Svelte组件无法通过{@html}直接渲染，要么用svelte:component实现动态组件，要么将组件转为自定义元素来支持HTML字符串形式的渲染。

内容的提问来源于stack exchange，提问作者john