Why snippets are working without render

[thisisommore]

SideBar seems to be working without any issue here, even through render is not used

<script lang="ts">
	import { SERVER_PUB_CREDS } from '$lib/api/contants';
	import { progress } from '$lib/xxdk/index.svelte';
	import { globalStore } from '../../store.svelte';
	export type Props = {
		newChat: () => void;
		selectChat: (i: number) => void;
		chatsElement: HTMLDivElement | undefined;
		isSending: boolean;
		messageInput: string;
		sendMessage: () => void;
	};
	let {
		newChat,
		selectChat,
		chatsElement = $bindable(),
		isSending,
		messageInput = $bindable(),
		sendMessage
	}: Props = $props();
</script>

<div class="h-full overflow-hidden bg-(--bg) font-sans text-(--fg)">
	<div class="grid h-screen grid-cols-[280px_1fr]">
		<SideBar />
		<!-- Main chat -->
		...
	</div>
</div>

{#snippet SideBar()}
	<!-- Sidebar -->
	<aside class="flex flex-col border-r border-(--line) bg-(--bg-sunken)">
		<div class="min-h-0 flex-1 overflow-y-auto px-1.5 pt-1.5">
			<div class="flex flex-col gap-0.75 px-1 pt-2 pb-0.5">
				<button
					class="flex w-full cursor-pointer items-center gap-2.5 rounded-[5px] border border-(--line-2) bg-(--bg-elev) px-2.5 py-1.75 text-left text-[13px] leading-tight text-(--fg-2) transition-all duration-150 hover:border-(--line) hover:bg-(--bg-elev-2) hover:text-(--fg)"
					onclick={newChat}
				>
					<span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">+ new chat</span>
				</button>
				{#each globalStore.xxdk!.chats as c, i (c.id)}
					{@const isActive = globalStore.xxdk!.activeChatId === c.id}
					<button
						class={[
							'flex w-full cursor-pointer items-center gap-2.5 rounded-[5px] px-2.5 py-1.75 text-left text-[13px] leading-tight transition-all duration-150',
							isActive
								? 'relative border-(--fg) bg-(--fg) font-medium text-(--bg)'
								: 'border-(--line-2) bg-(--bg-elev) text-(--fg-2) hover:border-(--line) hover:bg-(--bg-elev-2) hover:text-(--fg)'
						]}
						onclick={() => {
							selectChat(i);
						}}
					>
						{#if isActive}
							<span class="absolute top-1 bottom-1 -left-1.5 w-0.5 rounded-sm bg-(--fg)"></span>
						{/if}
						<span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{c.title}</span>
					</button>
				{/each}
			</div>
			<div class="h-4"></div>
		</div>

		<!-- Search -->
		<button
			class="mx-2 mb-0 flex h-9 cursor-text items-center gap-2 rounded-md border border-(--line) bg-(--bg-elev) px-3 text-left text-[13px] text-(--fg-3) transition-all duration-150"
			title="Search"
		>
			<svg
				width="14"
				height="14"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
			>
				<circle cx="11" cy="11" r="8" />
				<path d="m21 21-4.3-4.3" />
			</svg>
			<span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">Search chats…</span>
			<span
				class="rounded-[3px] border border-(--line) bg-(--bg) px-1.25 py-px font-mono text-[10px] text-(--fg-4)"
				>⌘K</span
			>
		</button>

		<!-- Wallet card -->
		<div
			class="mx-2 mt-2 mb-3.5 flex flex-col overflow-hidden rounded-lg border border-(--line) bg-(--bg-elev)"
		>
			<div class="flex items-center justify-between gap-2 py-2 pr-2 pl-3.5">
				<span class="font-serif text-sm tracking-tight text-(--fg) italic">Wallet</span>
				<div class="flex items-center gap-2">
					<button
						class="cursor-pointer rounded-full border border-[color-mix(in_oklch,var(--line)_35%,oklch(55%_0.18_25)_65%)] bg-(--bg) px-2.5 py-1 font-mono text-[10px] text-[oklch(52%_0.18_25)] lowercase transition-all duration-150 hover:border-[oklch(52%_0.22_25)] hover:bg-[color-mix(in_oklch,var(--bg-elev)_75%,oklch(55%_0.22_25)_12%)] hover:text-[oklch(46%_0.22_25)]"
					>
						disconnect
					</button>
				</div>
			</div>
			<button
				class="relative flex w-full cursor-pointer items-center justify-between gap-2.5 overflow-hidden border-t border-(--line) px-3.5 py-2.5 pb-2.75 text-left font-mono text-[11px] tracking-tight text-(--fg) transition-all duration-150 hover:bg-(--bg-elev-2)"
			>
				<span class="inline-flex shrink-0 items-center gap-1">
					<span class="font-mono text-xs font-medium tracking-tight">12.45</span>
					<span class="font-mono text-[10px] tracking-widest text-(--fg-3) uppercase">XX</span>
				</span>
				<span class="min-w-2 flex-1"></span>
				<span class="relative inline-flex shrink-0 items-center overflow-hidden">
					<span
						class="font-mono text-[11px] tracking-tight whitespace-nowrap text-(--fg) transition-all duration-150"
						>0x7a3f…9c2b</span
					>
				</span>
			</button>
		</div>
	</aside>
{/snippet}

[brunnerh]

Snippets and components currently have similar internal APIs.
You should not rely on this behavior and you will run into errors as soon as you set properties.
(Snippets get positional arguments while components get a key/value dictionary.)

[barry166]

It works because the compiled snippet value currently has a component-like call shape, but the supported syntax is still {@render SideBar()}.

I would change the call site to this:

{@render SideBar()}

{#snippet SideBar()}
  <aside>...</aside>
{/snippet}

Use <SideBar /> only for actual components imported from another file or declared as a component. A snippet receives positional arguments, while a component receives a props object, so the shortcut can break as soon as you add parameters/props even if it happens to render in the no-arg case today.

[VectorPeak]

This is an artifact of how the compiler resolves capitalized tags, not a supported snippet invocation. <SideBar /> is parsed as a component tag because it is capitalized; it just happens that the local snippet binding has a callable shape that currently doesn’t fail for a zero-argument snippet.

The important detail in your example is that SideBar() takes no snippet parameters and only closes over values from the surrounding component (newChat, selectChat, globalStore, etc.). That makes the accidental component-style call look fine because there’s no argument mismatch to observe.

The stable version is:

{@render SideBar()}

{#snippet SideBar()}
	<aside>...</aside>
{/snippet}

If you want component syntax, make it a component. If you want an inline reusable template block, render it as a snippet.

---

If my answer solved your problem, please mark it as answered the question — I'm here to help, and honestly I'm also collecting Galaxy Brain badges along the way 😆