#1 Tired of Learning New JS Frameworks ?? Create your first Stencil Web Component & Use Anywhere!!!

3 min readSep 8, 2019

What is Stencil ?

As per official documentation of Stencil team,

Stencil is a developer-focused toolchain for building reusable, scalable component libraries, applications and design systems. It provides a compiler that generates highly optimised Web Components, and combines the best concepts of the most

In simple words, if you want to create framework agnostic reusable standards-compliant web components, Stencil is your best bet.

In this post, we are going to create a starter web component using Stenciljs which can be used later in any framework like Angular, React or Vue.

Installing Stencil

Install stencil globally in your system using:

npm install @stencil/core@latest --save-exact -g

(Note: Stencil requires LTS version of node. Please make sure that node is installed in your system.)

2. Start your stencil app with following command:

npm init stencil

You will get 3 options as shown in following figure:

npm init stencil starter options — Stencil Starter Options (npm init stencil)

Choose 3rd option “component” to follow along with this series. Enter the project name & confirm to get started as shown below:

Enter Stencil Project Name — Stencil Project Name

A folder will be created for you as shown in following figure :

Creating your first Stencil Component

Stencil by default will create one component called “my-component” for you. But for this series, let’s create another component.

Create a folder named “sten-header” and 2 files inside that “sten-header.tsx” and “sten-header.css”.

Copy the following code in “sten-header.tsx” file :

Code for stencil component’s tsx file — sten-header.tsx

Copy the following code in “sten-header.css” file:

Code for sten-header css file — sten-header.css

Type the component tag in “index.html”, as shown below:

Add web component tag to index.html file — index.html

Here we are using our custom web component in 2 ways:

a) Using the default property as specified in the component like

<sten-header></sten-header>

b) Over-riding the property with a value of “No, JavaScript is best !!!” from the parent component like:

<sten-header heading="No, JavaScript is best !!!"></sten-header>

Running your Stencil Component

To see your web component in browser, type following command in terminal,

npm run start

As you can see in “package.json”, this script will build the project in watch mode. This means that whatever changes you are making in your source file are continuously being built & served to be shown in the browser.

You will find that a “dist” folder is created after running this command, which has all your source files built.

Go to http://localhost:3333, to see your changes.

Your screen will look something like this :