` to a child component, `$$slots.title` will be truthy within the child. ```svelte

{#if $$slots.description}

{/if}

Blog Post Title

``` ### `` Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive. The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `` is equivalent to ``. ```svelte

{thing.text}

``` Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute. ```svelte

{item.text}

``` ## `` The `` element allows a component to include itself, recursively. It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop. ```svelte {#if count > 0}

counting down... {count}

{:else}

lift-off!

{/if} ``` ## `` ```svelte ``` The `` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated. If `this` is falsy, no component is rendered. ```svelte ``` ## `` ```svelte ``` The `` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element. The only supported binding is `bind:this`, since the element type-specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type. If `this` has a nullish value, the element and its children will not be rendered. If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `` has child elements, a runtime error will be thrown in development mode. ```svelte Foo ``` ## `` ```svelte ``` ```svelte ``` The `` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering. Unlike ``, this element may only appear at the top level of your component and must never be inside a block or element. ```svelte ``` You can also bind to the following properties: - `innerWidth` - `innerHeight` - `outerWidth` - `outerHeight` - `scrollX` - `scrollY` - `online` — an alias for `window.navigator.onLine` - `devicePixelRatio` All except `scrollX` and `scrollY` are readonly. ```svelte ``` > Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`. ## `` ```svelte ``` ```svelte ``` Similarly to ``, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on `document`. As with ``, this element may only appear the top level of your component and must never be inside a block or element. ```svelte ``` You can also bind to the following properties: - `activeElement` - `fullscreenElement` - `pointerLockElement` - `visibilityState` All are readonly. ## `` ```svelte ``` Similarly to ``, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `` element. As with `` and ``, this element may only appear the top level of your component and must never be inside a block or element. ```svelte ``` ## `` ```svelte ... ``` This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content. As with ``, `` and ``, this element may only appear at the top level of your component and must never be inside a block or element. ```svelte Hello world! ``` ## `` ```svelte ``` The `` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/svelte-compiler#compile). The possible options are: - `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed - `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed - `accessors={true}` — adds getters and setters for the component's props - `accessors={false}` — the default - `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings - `customElement="..."` — the name to use when compiling this component as a custom element ```svelte ``` ## `` The `` element allows you to place content in a [named slot](/docs/special-elements#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact. ```svelte

No header was provided

Some content between header and footer

Hello

```