Je cherche à mieux comprendre la syntaxe let:close utilisée dans le contexte de Svelte, comme dans l’exemple suivant :
<Popover>
<PopoverButton>Solutions</PopoverButton>
<PopoverPanel let:close>
<button
on:click={async () => {
await fetch("/accept-terms", { method: "POST" });
close();
}}
>
Read and accept
</button>
<!-- ... -->
</PopoverPanel>
</Popover>Ce code provient du projet svelte-headlessui.
À première vue, cette syntaxe me faisait penser aux <slot key={value}> dans Svelte 🤔.
Cette intuition s’est confirmée après avoir exploré le concept plus en détail à travers l’exemple suivant :
<!-- FancyList.svelte -->
<ul>
{#each items as item}
<li class="fancy">
<slot prop={item} />
</li>
{/each}
</ul>
<!-- App.svelte -->
<FancyList {items} let:prop={thing}>
<div>{thing.text}</div>
</FancyList>Après avoir lu la section sur les <slot key={value}> , je me rends compte que je n’utilise presque jamais les slots, à l’exception des layout. C’est dommage, car je passe à côté d’une fonctionnalité très pratique.