Creating Web Component with Stencil

In this article, we are going to create simple hello world web component using 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 (&lt;h1&gt;Hello World&lt;/h1&gt;)<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

<hello-world></hello-world>

so when this is rendered browser will display Hello World.