Svelte v5 で導入されたスニペット機能について

コンポーネント内で、たとえばeachのループの中で使われるhtmlをまとめる機能

たとえば以下のようにして、eachの中で登録したhtmlを引数付きで渡すような機能。

やろうとしている事的に、子コンポーネント作らないで、その中で完結するためにあるのかも

code:html

<script>

const posts = [

{ id: 1, title: "Hello, Svelte", createdAt: "2024-05-19T13:36+09:00" },

{ id: 2, title: "Svelte is awesome", createdAt: "2024-05-19T13:36+09:00" },

];

</script>

{#snippet card(post)}

<article>

<h2>{post.title}</h2>

<time datetime={post.createdAt}>{post.createdAt}</time>

</article>

{/snippet}

{#each posts as post}

{@render card(post)}

{/each}

スニペットが導入されたことでslotがいらなくなった(非推奨になった)