Svelte中如何优雅实现条件式HTML元素包装？

Svelte的模板编译器要求HTML标签必须成对闭合，因此像这样拆分标签写条件的写法会直接抛出ParseError: Unexpected block closing tag错误：

{#if whatever}
  <a href="myurl">
{/if}

<!-- 多行复杂的动态文本输出代码 -->

{#if whatever}
  </a>
{/if}

针对这种「根据条件决定是否用某个HTML标签包裹复杂内容」的需求，无需额外封装组件或用{@html}注入DOM，Svelte内置的<svelte:element>组件就能完美解决，写法简洁优雅：

<svelte:element this={whatever ? 'a' : undefined} href={whatever ? 'myurl' : undefined}>
  <!-- 这里直接放入所有复杂的动态内容，只写一次 -->
  动态文本内容1
  <p>动态生成的段落</p>
  {#if someOtherCondition}
    <span>条件渲染的内容</span>
  {/if}
</svelte:element>

原理说明 #

• this属性：动态指定要渲染的HTML元素类型，当条件不满足时设为undefined或null，此时<svelte:element>不会生成任何包裹元素，直接渲染插槽内的内容
• 属性传递：像href这类仅属于目标元素的属性，可以通过条件判断来传递，避免在非目标元素上出现无效属性

这种方式适用于所有需要条件包裹的HTML元素，比如条件包裹<div>、<section>等，只需修改this的值和对应的属性即可：

<svelte:element this={shouldWrapDiv ? 'div' : undefined} class="container">
  <!-- 复杂内容 -->
</svelte:element>

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