Svelte动态渲染自闭合与非自闭合元素时如何消除警告？

当用<svelte:element>动态渲染input和button时，哪怕内部是条件判断的空内容，Svelte也会检测到input标签里存在模板结构，抛出“<svelte:element this="input"> is self-closing and cannot have content”的警告。这里有两种实用的解决方法：

方法一：拆分条件渲染，分别处理标签 #

直接在循环里判断元素类型，分开渲染对应的标签，让input彻底没有内容节点：

{#each nodes as node}
  {#if node.tag === 'button'}
    <button type={node.type} name={node.name}>
      {node.label}
    </button>
  {:else if node.tag === 'input'}
    <input type={node.type} name={node.name} />
  {/if}
{/each}

这种写法最直接，不仅能消除警告，代码可读性也更强。

方法二：用<svelte:fragment>包裹条件内容（保留<svelte:element>写法） #

如果不想拆分元素结构，可以用<svelte:fragment>让条件内容仅在符合要求时才被渲染，避免给input留下空内容节点：

{#each nodes as node}
  <svelte:element
    this={node.tag}
    type={node.type}
    name={node.name}
  >
    {#if node.tag === 'button'}
      <svelte:fragment>
        {node.label}
      </svelte:fragment>
    {/if}
  </svelte:element>
{/each}

这种方式能保留<svelte:element>的动态写法，但相比第一种，代码会稍显冗余。

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