如何在Svelte的@html指令中渲染自定义组件？

• 核心原因：{@html} 指令仅用于渲染原生HTML内容，Svelte编译器不会解析其中的组件标签，所以<MyComponent>只会被当作普通HTML标签处理，不会实例化对应的Svelte组件。

• 正确实现方式：

  1. 静态引入组件后用<svelte:component>渲染：

     <script>
       import MyComponent from './MyComponent.svelte';
     </script>
     
     <svelte:component this={MyComponent}>slot content</svelte:component>
     

  2. 动态加载组件的场景（按需加载）：

     <script>
       let currentComponent = null;
       
       async function loadTargetComponent() {
         const module = await import('./MyComponent.svelte');
         currentComponent = module.default;
       }
     </script>
     
     <button on:click={loadTargetComponent}>加载组件</button>
     {#if currentComponent}
       <svelte:component this={currentComponent}>slot content</svelte:component>
     {/if}
     

• 关键注意点：

  • {@html}从设计上就不支持渲染Svelte组件，只能处理原生HTML字符串。
  • <svelte:component>完全支持传递props、插槽内容，和直接使用组件的逻辑一致。

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