Svelte 5: missing inner content warning if children prop is forwarded

[fehnomenal]

Describe the bug

Like in #11127 the warning

src/routes/+layout.svelte
`<slot />` or `{@render ...}` tag missing — inner content will not be rendered

is printed even though my layout forwards the children prop to another component which displays it then.

Reproduction

See: https://stackblitz.com/edit/sveltejs-kit-template-default-u9oiqqaf

The +layout.svelte consists of only this:

<script>
	import Layout from './Layout.svelte';

	/** @type {{children: import('svelte').Snippet}} */
	let { children } = $props();
</script>

<Layout {children} />

Logs

System Info

Does not matter

Severity

annoyance

Additional Information

No response

[Conduitry]

Using <Layout>{@render children()}</Layout> instead in your +layout.svelte would remove the error.

I'm not certain whether we'd want to change the warning here to simply check whether you're using the children prop anywhere. It'd be more complicated, for an unusual case (with a simple workaround), and would have the risk of false negatives, because we can't reasonably track what happens to the children prop after it leaves this component to see whether it ever ends up in a {@render}.

[elliott-with-the-longest-name-on-github]

Hmm, I guess if we can tell the children prop is being passed into anything in a layout we should just bail on this analysis and trust you know what you're doing.

[elliott-with-the-longest-name-on-github]

This is low-priority/annoyance-tier, so I'm not going to dedicate time to fixing it right now, but if someone wants to dig in and open a PR to make this rule more intelligent, I'd be happy to have it.

Basically, if children is passed into any component, we should silence this warning and trust the developer knows what they're doing. I can think of two ways this could happen:

• children is explicitly passed into the component (as in the issue above)
• children is part of {...props} passed into a component

[IanGallacher]

In regards to the given workaround:

{@render children()}

That only works if you only need to pass one child.

Is there a recommended way to accomplish this?:

<script>
  import DynamicTwoColumnLayout from '$components/layout/DynamicTwoColumnLayout.svelte';

  const { children } = $props();
</script>

{#snippet relatedButtons()}
<nav>(buttons here)</nav>
{/snippet}

<DynamicTwoColumnLayout leftColumn={relatedButtons} rightColumn={children} />

Previously it seemed like you could accomplish this with slots, but those are no longer supported.

[Conduitry]

You could do {#snippet rightColumn}{@render children()}{/snippet}.

https://svelte.dev/docs/svelte/snippet#Passing-snippets-to-components Snippets defined directly within an instance of a child component also automatically become props to that component, which would let you be a bit more succinct as well.

[IanGallacher]

I'm slow to respond, but I do appreciate that idea. Thanks!