The "slot" attribute should be allowed to effectively direct descendant of the component

[andirady]

Describe the bug

Currently the following code would fail to compile with the error ValidationError: Element with a slot='...' attribute must be a child of a component or a descendant of a custom element.

<Input>
  {#if issuer == 'visa' || issuer == 'master'}
    <i slot="icon">{issuer}</i>
  {/if}
</Input>

I believe this should not fail, since the <i> element is effectively direct descendant of the component.

Reproduction

https://svelte.dev/repl/2c8730b239ab48779b6b9666f7ad0508?version=3.46.2

Logs

No response

System Info

Browser: any

Severity

annoyance

[sandipmalla44]

It only works if you add descendant component outside {#if}.
Example:
<Input>
  <div slot="icon">
  {#if issuer == 'visa' || issuer == 'master'}
    <i>{issuer}</i>
  {/if}
  </div>
</Input>

[dummdidumm]

Duplicate of #5604

[andirady]

It only works if you add descendant component outside {#if}.
Example:
<Input>
  <div slot="icon">
  {#if issuer == 'visa' || issuer == 'master'}
    <i>{issuer}</i>
  {/if}
  </div>
</Input>

The idea is to not have any child element if the issuer is neither visa nor master. Current workaround is to introduce a child element. It's fine for small application, but for enterprise ones, you might end up with too many files. :(