Other useful Svelte features

We've tried designing our journaling app to make use of most of the features of Svelte 3 that you're likely to adopt when building your own apps, but we could not fit them all in. The rest of this chapter will lightly touch on some more features of the Svelte compiler and runtime that might be useful to you.

Slots

Slots allow parents to pass markup to child components.

In the child component, define the place for a slot with the <slot>...</slot> syntax; you can optionally put some default (fallback) content inside.

An example of this can be seen in the following code snippet:

Child.svelte

<h1>Here's the child component</h1>
<div style="margin: 0 2em;">
    <slot>
        <p style="color: #999">This is the default              content &lt...