How to create Svelte Web Component?

1. Setup Svelte Project

Start with cloning template provided from the Svelte and setting up packages

npx degit sveltejs/template svelte-web-component

cd svelte-web-component

npm install

npm run dev

2. Use TypeScript (optional)

Even though Svelte doesn’t have official support for TypeScript yet, there is a way to do so. There are VS Code extensions and templates from the community. But for now I will stick to the JavaScript and I will be using TypeScript independently to write and compile TS files and use them as JS files. Have a look at the official Roadmap.

tsc --init will create tsconfig.json file and you need to specify few options. "outDir": "./src", "rootDir": "./ts", "baseUrl": "./ts", This way you can put TS files in ts folder and they will be compiled and put in the src folder on file save with the help of TS watcher.

npm install typescript --save-dev

tsc --init

tsc --watch

3. Create Svelte Component

The App.svelte component will be in the src folder coming from the template. It will be imported in the main.js file where App gets created and exported.

First of all you need to update the rollup.config.js :

plugins: [

svelte({

customElement: true,

Then I renamed App.svelte -> snake.svelte and update main.js accordingly

and update accordingly You need to tell Svelte that you are going to export your component as a Web Component. Use this line in the svelte component:

<svelte:options tag=”svelte-snake” immutable={true} />

Whatever you put in the tag will be actual web component tag in the final bundle.js . Also, note that I am using immutable={true} , because my state is immutable and thus Svelte uses referential equality checks to improve performance.

Whatever you put in the tag will be actual web component tag in the final . , because my state is immutable and thus Svelte uses referential equality checks to improve performance. You don’t need actual component creation in the main.js since we are going to export as a web component. You only need import and export the component. Have a look at my example of main.js :

import Snake from ‘./snake.svelte’;

export default Snake;

since we are going to export as a web component. You only need import and export the component. Have a look at my example of : Update public/index.html to use our Web Component, so that it gets correctly displayed in the browser during development.

<body> <svelte-snake></svelte-snake> </body>

You are ready to develop the snake.svelte component and then we are going to export it as a Web Component.

4. Build and Deploy

Execute npm run build and bundle.js file will get created in the public/build folder. It contains our completed Web Component with styles and additional code from Svelte to make it work.

I published the Web Component to the GitHub Pages. You can do it similarly, have a look at Get Started With GitHub Pages. It will also serve bundle.js file gzipped, that’s why I don’t do it myself.

Create docs folder in the project’s root folder

folder in the project’s root folder Copy bundle.js in the docs folder

in the docs folder Create and put index.html file in the docs folder. It needs proper base href and script import. Have a look at my example:

<base href=”https://gogakoreli.github.io/svelte-snake-web-component/">

<script defer src=’bundle.js’></script>

file in the folder. It needs proper base href and script import. Have a look at my example: Finally you can use: <body> <svelte-snake></svelte-snake> </body>

You can tell GitHub to serve static files from your project’s docs folder.

Go to GitHub Repository Settings -> Options -> GitHub Pages -> Source -> master branch /docs folder

5. Bundle Size

The project’s src folder contains several JS files and one Svelte Component.

Let’s look at their sizes:

input.js, main.js, map.js, models.js, snake.js, store.js : ~10.7KB, ~2.6KB (Gzipped)

snake.svelte : ~3.5KB, ~1.2KB (Gzipped)

After npm run build , Svelte compiles all of the source files into one bundle.js file, which contains all of the required Svelte functions to make Web Component work. In Svelte there is no runtime, there are functions that make templates update accordingly based on the changes and all the reactive code to work properly. This code is generated in the compile time. Anything else that I am not using will not end up in the bundle.js . Also bundle.js is minified and uglified.

bundle.js : ~13.7KB, ~5.4KB (Gzipped)

6. Experiment With Svelte Web Component Yourself

bundle.js contains all of the required code necessary to make svelte-snake Web Component work. You can create sample index.html on your computer, open it in browser and have a look at finished product and bundle size. Use following index.html for example:

Sample index.html

7. Compare With Angular Snake Web Component

📝Angular Snake Web Component — 51KB: Read my other article, where I created exactly same Web Component with Angular 9. The final bundle size for the Angular is significantly larger: ~51KB (Gzipped) vs ~5.4KB (Gzipped), but this doesn’t mean that either Angular or Svelte is better in creating Web Components.