Snippets derived from dynamic variables render even when null/undefined

[jwerre]

Describe the bug

When using the {@render} tag with snippets derived from dynamic variables (like $props or $state), the snippets are always rendered even when the variable is null or undefined. This causes unexpected behavior and potential errors in the application, as empty snippets are being rendered instead of being ignored.

When a snippet is null, undefined or empty (''), the {@render} tag should not attempt to render it, similar to how other reactive values work in Svelte. The documentation suggests using optional chaining {@render snippet?.()} as a workaround, but this should be the default behavior.

Reproduction

https://svelte.dev/playground/8540ec1eccfa4f259e12cc2e4b8af602?version=5.24.1

Logs

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.10 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - ~/.npm-global/bin/yarn
    npm: 9.9.4 - ~/Work/surveyplanet/svelte_components/node_modules/.bin/npm
  Browsers:
    Chrome: 134.0.6998.118
    Edge: 134.0.3124.68
    Safari: 18.3.1
  npmPackages:
    svelte: ^5.20.5 => 5.20.5

Severity

annoyance

[Conduitry]

I don't think {@render foo()} should silently ignore foo being undefined any more than foo() should. The ?.() optional chaining function call is the syntax to use in both situations - it's not a workaround.

[jwerre]

I think the issue is specifically with children since it is never undefined (I think). In the example I gave (last case) children is rendered even though there are no children.

[brunnerh]

A snippet captures the logic required to construct some HTML, not the content itself, so the snippet will always be defined even if some conditional structure is placed inside the snippet that might lead to empty content under some conditions.

A way around this would be to pass the snippet as property conditionally:

{#snippet children()}{content}{/snippet}
<Child children={content?.length > 0 ? children : null} />

Playground

[jwerre]

That's a nice solution for some cases but it's not how children was intended to be used and doesn't work with other components and HTML tags. It would be better to handle this at the component level where the snippet is rendered. For example:

{#if children?.().length}
    <div class="children">
        {@render children()}
    </div>
{/if}

Or maybe a utility function like createRawSnippet? Something like:

<script>
    import {snippetHasContent} from 'svelte';
</script>

{#if snippetHasContent(children)}
    <div class="children">
        {@render children()}
    </div>
{/if}

[7nik]

Renderless components and components with conditional content have the same behavior. Playground.

So, for me, this issue duplicate of #14299 (opened by you, btw).

[harrisi]

So, for me, this issue duplicate of #14299 (opened by you, btw).

These are related, but I don't think they're duplicates. I don't think #14299 is a Svelte issue, for what it's worth - it's a very weird situation where no browser implements the spec correctly for the :empty pseudo-selector.

This issue is about what it means to have a child. For what it's worth, this isn't new - Svelte 4 has the same behavior.

I think this is just a documentation issue (or maybe a misunderstanding - I'm not sure if it's documented somewhere). It's not entirely clear to me what the rule should be, but something like "anything inside a component tag's markup except exactly a comment and/or whitespace makes that component a parent" is maybe correct. I think the confusion comes from the runtime vs build-time difference. I'm not sure if it's possible to know (or desirable to be able to know) if a component is a potential parent. The behavior I think the author is looking for is to have a component be a potential parent and behave differently whether it is or not at runtime. The workaround @brunnerh pointed out is one option. Another option is to do something like this:

{#if content && content.length > 0}
  <Child>{content}</Child>
{:else}
  <Child></Child>
{/if}

Which isn't the nicest, but it highlights the code smell more. The code smell, to me, is having a component which is both expected to be a parent as far as styling goes (given the CSS), and unaware of it's a component (as far as the template conditional goes). In this specific example you can work around it by doing something like this:

<style>
  .children:not(:empty) {
    border: 3px solid red;
    padding: 20px;
  }
</style>

Note that this does play nicely with the existing :empty issue that browsers have, so I think it may be a practical solution, more or less, for the author's issue.