Web Components is a technology I’ve been excited about for years. The idea is that you can create your own UI components that are supported in the browser regardless of which framework you are using (or none at all for that matter). However, there wasn’t much traction around them until recently.

The web components APIs are pretty low level by themselves but projects like Polymer are trying to improve the developer experience and recently more tools came along to help with authoring web components. One of these tools is Stencil from the Ionic team.

If you are not yet familiar with web components, I suggest you check out this short introduction on webcomponents.org to get an idea of Custom Elements and Shadow DOM. If you want to have a better idea of why web components might be of interest for you, even if you don’t author a UI framework for the public, check out this talk Alexander Zogheb on how they used web components at EA.

In this blog post we’ll look at how we can develop a web component using Stencil, publish it to npm and consume it on a website.

Setup

We’ll develop a progress bar component called my-progress-bar that will allow us to pass the current value and optionally a maximum value as well as a “styling API” to alter the colors.

Before we get started make sure you have Node.js and npm or yarn installed.

Start a new project for our web component by running the following in your command-line: