Svelte includes a handful of built-in elements with special behaviour.
### `<svelte:self>`
Sometimes, a component needs to embed itself recursively — for example if you have a tree-like data structure. In Svelte, that's accomplished with the `<svelte:self>` tag:
```html
<!-- { title: '<svelte:self> tags' } -->
{#if countdown > 0}
<p>{countdown}</p>
<svelte:selfcountdown="{countdown - 1}"/>
{:else}
<p>liftoff!</p>
{/if}
```
```json
/* { hidden: true } */
{
countdown: 5
}
```
### `<svelte:component>`
If you don't know what kind of component to render until the app runs— in other words, it's driven by state (aka a dynamic component) — you can use `<svelte:component>`:
```html
<!-- { title: '<svelte:component> tags' } -->
<script>
import Red from './Red.html';
import Blue from './Blue.html';
let foo = true;
</script>
<inputtype=checkboxbind:checked={foo}> foo
<svelte:componentthis="{foo ? Red : Blue}"name="thing"/>
```
```html
<!--{ hidden: true, filename: 'Red.html' }-->
<pstyle="color: red">Red {name}</p>
```
```html
<!--{ hidden: true, filename: 'Blue.html' }-->
<pstyle="color: blue">Blue {name}</p>
```
The expression inside the `this="{...}"` can be any valid JavaScript expression.
### `<svelte:window>`
The `<svelte:window>` tag gives you a convenient way to declaratively add event listeners to `window`. Event listeners are automatically removed when the component is destroyed.
The `<svelte:body>` tag, just like `<svelte:window>`, gives you a convenient way to declaratively add event listeners to the `document.body` object. This is useful for listening to events that don't fire on `window`, such as `mouseenter` and `mouseleave`.
If you're building an application with Svelte — particularly if you're using [Sapper](https://sapper.svelte.technology) — then it's likely you'll need to add some content to the `<head>` of your page, such as adding a `<title>` element.
