Special Elements in Svelte
Tags: svelte, webdev, programming, javascript
Published: 2021-01-28 21:39:45

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at special Svelte elements and how we can use them.

### svelte:component

We can use the `svelte:component` element to load components dynamically. It takes a `this` prop which accepts a component object to load.

For instance, we can use it as follows:

```
<script>
  import Foo from "./Foo.svelte";
  import Bar from "./Bar.svelte";

let component = Foo;
  const toggle = () => {
    component = component === Foo ? Bar : Foo;
  };
</script>

<button on:click={toggle}>Toggle</button>

<svelte:component this={component}/>
```

In the code above, we have the `toggle` to set `component` to the component we want to load by toggling between `Foo` and `Bar` as the value of `component` .

Then we pass `component` into the `this` prop to load the component.

### svelte:window

We can use the `svelte:window` component to add listeners to the `window` object.

For instance, we can use it as follows:

```
<script>
  let key;
  const handleKeydown = e => {
    key = e.keyCode;
  };
</script>

<p>{key}</p>

<svelte:window on:keydown={handleKeydown}/>
```

The code above attaches the `handleKeydown` to the `window` object. `handleKeydown` gets the `keyCode` from the event object `e` and then sets the value to `key` .

`key` is then displayed in a p element. Then when we press on keys then we see the key code of the key that’s pressed.

We can also add event modifiers like `preventDefault` to `svelte:window` like any other DOM element.

Also, we can bind to certain properties of `window` such as the following:

*   `innerWidth`
*   `innerHeight`
*   `outerWidth`
*   `outerHeight`
*   `scrollX`
*   `scrollY`
*   `online` — an alias for `window.navigator.onLine`

All properties except `scrollX` and `scrollY` are read-only. For instance, we can write the following to display those values on the screen:

```
<script>
  let innerWidth;
  let innerHeight;
  let outerWidth;
  let outerHeight;
  let scrollX;
  let scrollY;
  let online;
</script>

<p>{innerWidth}</p>
<p>{innerHeight}</p>
<p>{outerWidth}</p>
<p>{outerHeight}</p>
<p>{scrollX}</p>
<p>{scrollY}</p>
<p>{online}</p>

<svelte:window
  bind:innerWidth
  bind:innerHeight
  bind:outerWidth
  bind:outerHeight
  bind:online
  bind:scrollX
  bind:scrollY
/>
```

The values are automatically updated since we used `bind` to bind the values to the variables.

### svelte:body

`svelte:body` element allows us to listen for events in that’s fired on `document.body` .

For instance, we can use it to listen to mouse movements on the body element as follows:

```
<script>
  let clientX;
  let clientY;
  const handleMousemove = e => {
    clientX = e.clientX;
    clientY = e.clientY;
  };
</script>

<p>{clientX}</p>
<p>{clientY}</p>
<svelte:body on:mousemove={handleMousemove} />
```

The code above watches for mouse movements in the body adding the `on:mousemove` directive to `svelte:body` and setting the `handleMousemove` handler function as the value.

Then we get the mouse position by getting the `clientX` and `clientY` from the event object `e` and setting them to variables.

Finally, we display those values by interpolating those variables in the p elements.

Therefore, when we move the mouse inside the body, then we see the mouse position coordinates displayed.

### svelte:head

The `svelte:head` elements let us insert elements inside the `head` of our document. For instance, we can use it to reference an external CSS file by writing:

```
<svelte:head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
</svelte:head>

<h1 class="text-primary">foo</h1>
```

In the code above, we just put the link tag for Bootstrap CSS in between the `svelte:head` tags. Then we can see the word foo with the color blue.

In server-side rendering mode, `svelte:head` ‘s contents are returned separated from the rest of the HTML.

### svelte:options

`svelte:options` lets us specify compiler options. We can change the following options by passing them as props:

*   `immutable={true}` — Make the compiler do simple referential checks to determine if values have changed
*   `immutable={false}` — The default choice. 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 choice.
*   `namespace="..."` — The namespace where this component will be used
*   `tag="..."` — The name to use when compiling a component as a custom element.

For example, we can write the following to set the `immutable` option to `true` :

```
<svelte:options immutable={true} />

<h1>foo</h1>
```

### Conclusion

Svelte’s special components let us access various parts of the DOM like `window` and `document.body` without hassle.

`svelte:component` lets us dynamically load components.

Also, we can reference the `svelte:options` component to set various app-wide options.