<NME> text.md
<BEF> ---
title: <svelte:self>
---

Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allows a component to contain itself recursively.

It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this...

```html
{#if file.type === 'folder'}
	<Folder {...file}/>
{:else}
	<File {...file}/>
{/if}
```

...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:

```html
{#if file.type === 'folder'}
	<svelte:self {...file}/>
{:else}
	<File {...file}/>
{/if}
```

<MSG> docs: remove type property from special elements tutorial (#4715)

Instead, determine type based on the existence of the files property. Removes console warnings
<DFF> @@ -7,7 +7,7 @@ Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allo
 It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this...
 
 ```html
-{#if file.type === 'folder'}
+{#if file.files}
 	<Folder {...file}/>
 {:else}
 	<File {...file}/>
@@ -17,7 +17,7 @@ It's useful for things like this folder tree view, where folders can contain *ot
 ...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
 
 ```html
-{#if file.type === 'folder'}
+{#if file.files}
 	<svelte:self {...file}/>
 {:else}
 	<File {...file}/>

{'addition_count': 2, 'commit_subject': 'docs: remove type property from special elements tutorial (#4715)', 'deletion_count': 2, 'file_extension': '.md', 'lang': 'md', 'license': 'mit', 'repo_name': 'sveltejs/svelte'}