Creating Web Components with Stencil

Creating Web Component with Stencil

In this article, we are going to create simple hello world web component using Stencil.


Creating Web Component with Stencil

If you ever worked with angular/typescript then It will be very easy for you to learn stencil,
because most of the syntax are same.

Now let’t take a look at stencil compnent

<br />import { Component } from '@stencil/core';<br />@Component({<br />    tag: 'hello-world',<br />    styleUrl: 'hello-world.scss'<br />})<br />export class MyComponent {<br />    render() {<br />        return (<h1>Hello World</h1>)<br />    }<br />}<br />

Did you notice the syntax?
It’s similar to angular, right!
Now, Let’s understand it,

The First basic thing is @Component() decorator, It provides metadata about components, Like which tag name to use and which file to use for the styling that component.

so If we supply tag as hello-world(i.e tag:”hello-world”), then in HTML we will write our component as following


so when this is rendered browser will display Hello World.

Stencil js

Each component has render function which returns JSX content, In this example it is
<h1>Hello World</h1>

so that means when render function will be called it will return Hello World and will be displayed on the browser.

Thanks for reading this articles, stay tune for more articles. 🙂

I hope you like this Creating Web Component with Stencil article. 🙂

Also Read :