Special elements
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...
{#if file.type === 'folder'}
<Folder {...file}/>
{:else}
<File {...file}/>
{/if}
...but that's impossible, because a file can't import itself. Instead, we use <svelte:self>
:
{#if file.type === 'folder'}
<svelte:self {...file}/>
{:else}
<File {...file}/>
{/if}
App.svelte
File.svelte
Folder.svelte
xxxxxxxxxx
41
1
<script>
2
import Folder from './Folder.svelte';
3
4
let root = [
5
{
6
type: 'folder',
7
name: 'Important work stuff',
8
files: [
9
{ type: 'file', name: 'quarterly-results.xlsx' }
10
]
11
},
12
{
13
type: 'folder',
14
name: 'Animal GIFs',
15
files: [
16
{
17
type: 'folder',
18
name: 'Dogs',
19
files: [
Console
- "<File> was created with unknown prop 'type'"
xxxxxxxxxx
105
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
create_component,
5
destroy_component,
6
init,
7
mount_component,
8
noop,
9
safe_not_equal,
10
transition_in,
11
transition_out
12
} from "svelte/internal";
13
14
import Folder from "./Folder.svelte";
15
16
function create_fragment(ctx) {
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */