Use svelte:self
to render the current component recursively.
Use svelte:component
to dynamically render a component.
Use svelte:element
to dynamically render an element.
Use svelte:window
to add an event listener to the window
object, or bind local data to a value of window
.
Use svelte:body
and svelte:document
to bind event listeners.
Use svelte:head
to add contents in the <head>
of the document.
Use svelte:options
to specify compiler options for the component.
Use svelte:fragment
fill a named slot without wrapping it in an HTML element.
{#each page.children as page}
<svelte:self class="child" {page} />
{/each}
<script>
import Todo from './Todo.svelte';
import Completed from './Completed.svelte';
export let todo;
$: component = todo.completed
? Completed : Todo;
</script>
<svelte:component this={component} {todo} />
<svelte:element this={level === 1 ? 'h1' : 'h2'}>
{title}
</svelte:element>
<script>
let innerWidth, innerHeight,
outerWidth, outerHeight,
scrollX, scrollY,
online;
</script>
<svelte:window on:keydown={handleKeydown} />
<svelte:window bind:scrollY={innerWidth} />
<svelte:window bind:scrollY={innerHeight} />
<!-- … -->
<svelte:body on:click={handleClick} />
<svelte:document on:click={handleClick} />
<svelte:head>
<title>Hello, world!</title>
</svelte:head>
<svelte:options immutable />
<svelte:fragment slot="footer" />
Subtracting from your list of priorities
is as important as adding to it.
</svelte:fragment>