Svelte logo

Svelte by Example: Special Elements

Svelte supports a set of "special elements",

In this example, we'll briefly review Svelte's 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} />
  import Todo from './Todo.svelte';
  import Completed from './Completed.svelte';

  export let todo;

  $: component = todo.completed
    ? Completed : Todo;

<svelte:component this={component} {todo} />
<svelte:element this={level === 1 ? 'h1' : 'h2'}>
  let innerWidth, innerHeight,
      outerWidth, outerHeight,
      scrollX, scrollY,

<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} />
  <title>Hello, world!</title>
<svelte:options immutable />
<svelte:fragment slot="footer"  />
  Subtracting from your list of priorities
  is as important as adding to it.