Special Elements in Svelte

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.