Creating Web Component with Stencil

In this Creating Web Component with Stencil 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


 import { Component } from '@stencil/core';
 @Component({
            tag: 'hello-world',
            styleUrl: 'hello-world.scss'
           })

  export class MyComponent {
  render() {
   return (<h1>Hello World</h1>)
  }
}

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.

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

Did you notice the syntax?

It’s similar to angular, right!Now, Let’s understand it,

It’s similar to angular, right!
Now, Let’s understand it,