List of Special Svelte Elements. They let us access elements and set…
By: John Au-Yeung
Tags: Web Development, Technology, Programming, Software Development, JavaScript

Photo by Leighton Robinson on Unsplash

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.

Photo by Nikolay Hristov on Unsplash

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

— 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

— 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

— Adds getters and setters for the component's props accessors={false} — The default choice.

— The default choice. namespace="..." — The namespace where this component will be used

— 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.

A note from JavaScript In Plain English

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.