Svelte • Legacy APIs
<svelte:self>
The <svelte:self> element allows a component to include itself, recursively.
It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component’s slot to prevent an infinite loop.
<script lang="ts">
export let let count: anycount;
</script>
{#if let count: anycount > 0}
<p>counting down... {let count: anycount}</p>
<svelte:self count={let count: anycount - 1} />
{:else}
<p>lift-off!</p>
{/if}<script>
export let let count: anycount;
</script>
{#if let count: anycount > 0}
<p>counting down... {let count: anycount}</p>
<svelte:self count={let count: anycount - 1} />
{:else}
<p>lift-off!</p>
{/if}This concept is obsolete, as components can import themselves:
<script lang="ts"> importSelf from './App.svelte' export lettype Self = SvelteComponent<Record<string, any>, any, any> const Self: LegacyComponentTypelet count: anycount; </script> {#iflet count: anycount > 0} <p>counting down... {let count: anycount}</p> <const Self: LegacyComponentTypeSelf count={let count: anycount - 1} /> {:else} <p>lift-off!</p> {/if}<script> importSelf from './App.svelte' export lettype Self = SvelteComponent<Record<string, any>, any, any> const Self: LegacyComponentTypelet count: anycount; </script> {#iflet count: anycount > 0} <p>counting down... {let count: anycount}</p> <const Self: LegacyComponentTypeSelf count={let count: anycount - 1} /> {:else} <p>lift-off!</p> {/if}