How far can we go with web components [Part-1]

Hemanth Kumar — Mon, 06 Apr 2020 15:20:30 +0000

Web components are reusable custom elements that have a shadow dom attached to it.

Any web component can basically be divided into 3 main parts;

Custom element: The javascript API's responsible for creating the element-tag and defining its behavior
Shadow DOM: The main element tree that is used to render the custom element to the main-DOM
HTML templates: The <template> and <slot> tags are used to define the HTML present inside the shadow DOM To read more about web components click here

Pre-requisites

To follow along you should know javascript and a bit of svelteJS or any other front-end framework which supports web components.

You don't need to know svelte or any other framework to create web components but a framework makes it a bit easier to create them

Why svelte?

Svelte compiles your code directly into vanilla javascript so if you write your web component in vanilla javascript the bundle size would be very similar and svelte comes with some cool features which we would be using.

Setup

Step 1

Get the svelte web component template and install the dependencies

npx degit sveltejs/component-template my-new-component # name of your component goes here
cd my-new-component
npm i # or yarn

Step 2

Once downloading the template is done there are minor changes required to make it work properly

Add the customElement property in the rollup.config.js

    plugins: [
        svelte({
            customElement: true,
        }),
        resolve()
    ]

Add <svelte:options tag="your-tag-name"/> at the top of the Component.svelte file in the src directory and you should be good to go.

Hello World web component

To create a web component you need to write some code in the Component.svelte, something like this

<svelte:options tag="hello-world"/>
<script>
    export let name
</script>
<main>
<h1>Hello { name }!</h1>
</main>

clearly name is a prop and we will see how to send data into the component but for now just run npm run build. This will create two files in the dist folder namely index.js and index.mjs. That's it your web component is created

Use the hello-world component

To the hello-world component that we just created we need to import the index.js into a html and run it on a server

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Web components</title>
    <script src="./index.js"></script>
</head>
<body>
    <hello-world name="world"></hello-world>
</body>
</html>

clearly the prop name that needs to be passed is sent as an attribute to the web component and the web component recieves it and displays it, however if we don't pass anything it will display undefined.

DEV Community: Hemanth Kumar