title: Conditional rendering of a partial HTML element in Svelte
body: <p>As an example, suppose I want to create a component for a group of radio buttons:</p>
  <pre><code>&lt;!-- App.Svelte --&gt; 
  &lt;script&gt;
      import Radio from './Radio.svelte';
  &lt;/script&gt;
  
  &lt;main&gt;
      &lt;Radio group={&quot;stooges&quot;}
          btns={[&quot;Larry&quot;, &quot;Curly&quot;, &quot;Moe&quot;, &quot;Shep&quot;, &quot;Joe&quot;, &quot;Curley Joe&quot;]}
          checked={&quot;Curly&quot;}
          disabled={[&quot;Moe&quot;, &quot;Joe&quot;]}
      /&gt;
  &lt;/main&gt;
  </code></pre>
  <p>The following implementation of the radio group component produces correct behavior; <code>Curly</code> is pre-selected; <code>Moe</code> and <code>Joe</code> are grayed:</p>
  <pre><code>&lt;!-- Radio.svelte --&gt;
  &lt;script&gt;
    export let group;
    export let btns;
    export let checked;
    export let disabled;
  &lt;/script&gt;
  
  {#each btns as btn, idx}
    {#if btn === checked}
      {#if disabled.includes(btn)}
        &lt;input type=&quot;radio&quot; id={btn} value={btn} name={group} 
          checked disabled&gt;
      {:else}
        &lt;input type=&quot;radio&quot; id={btn} value={btn} name={group} checked&gt;
      {/if}
    {:else}
      {#if disabled.includes(btn)}
        &lt;input type=&quot;radio&quot; id={btn} value={btn} name={group} disabled&gt;
      {:else}
        &lt;input type=&quot;radio&quot; id={btn} value={btn} name={group}&gt;
      {/if}
    {/if}
    &lt;label for={btn}&gt;{btn}&lt;/label&gt;
  {/each}
  </code></pre>
  <p>Here is another implementation of the radio group component that is cleaner, but will not compile:</p>
  <pre><code>&lt;!-- Radio.svelte --&gt;
  &lt;script&gt;
    export let group;
    export let btns;
    export let checked;
    export let disabled;
  &lt;/script&gt;
  
  {#each btns as btn, idx}
    &lt;input type=&quot;radio&quot; id={btn} value={btn} name={group}
      {#if btn === checked} checked {/if}
      {#if disabled.includes(btn)} disabled {/if} 
    &gt;
    &lt;label for={btn}&gt;{btn}&lt;/label&gt;
  {/each}
  </code></pre>
  <p>The compiler flags the opening curly brace of the first <code>#if</code> statement with the message <code>Expected } svelte(unexpected-token)</code>.</p>
  <p>The only reason I can think of for the error in the second implementation is that, unlike the first implementation, which contains a complete <code>input</code> element on each <code>if-else</code> branch, the second implementation contains a part of an <code>input</code> element on each <code>if-else</code> branch. However, the Svelte docs don't warn against that, as far as I can tell.</p>