Svelte by Example: Special Elements

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>

resources://