Web Components API in a Nutshell

The what and why for the native Web Components API

Indrek Lasn
Jul 7 · 5 min read

We all know that re-using code as much as possible is generally a good idea. Sharing code between components saves us money, energy, and, most importantly, time.

Re-using code hasn’t been so easy for the complex HTML. You’ve sometimes had to write to render custom UI controls, and using them multiple times can turn your page into a mess if you are not careful.

Here’s where Web Components come in. Web Components is a suite of different technologies which allow you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and to utilize them in your web apps.

For example, web components let us define custom elements in HTML files.

Custom <app-button> HTML element (not JSX)

Note; We’re not using webpack, rollup, or bundler above. The syntax is supported by HTML5 and JavaScript.

Each JS framework has its own API for reusable components. A react-video-player won’t work in Ember, and a ember-preload won’t work in Vue. For example, Matrix.org’s JavaScript SDK is tied to React. Other JS SDK’s use an iframe (Facebook Like Button and other ad-tech SDK’s usually go this route) or abstain from providing any UI functionality at all (like WebTorrent).

Web Components, since they act exactly like built-in HTML elements, should work within any framework. If your framework can render arbitrary HTML elements, then it can render a custom HTML element. If you’re just building an app, it doesn’t matter; just render the HTML that you want in your template language. As a library author, the ability to provide a JavaScript widget with some level of encapsulation using only browser built-in APIs seems really nice. — notriddle


Getting Started

All we need is the index.html and theapp.js file. Make sure to include the app.js file in your index.html.

Notice how the browser global window object has a property called customElements — we call the define method on the property to create our custom HTML element. It takes three arguments, the last one is optional.

Defining a custom HTML syntax — Mdn

The first argument is the name of the custom element, app-button in the example above. The second argument is the constructor for the element. We use the constructor to build up our custom element, like attaching event listeners and logic.

Source

Notice how our WebComponentButton class extends the HTMLElement class. To put it simply, we inherit from and extend the built-in HTML elements.

Source

If we open the index.html file in our browsers, here’s what we should see:

Notice how there’s a JSX like node element in our DOM? Pretty cool, considering we’re not using any bundlers or frameworks here.

As expected, if we click on the button, nothing happens. We need to tell the button what to do after clicking on it. In order to accomplish this, let’s add an event listener for our button.

Attaching the click event listener to our button instance

Now, if we click on the button, we should see a click logged to the console.

Clicking on the button

Let’s add the styles to the button. How would we do that?

WebComponentButton class has lifecycles out of the box. If you come from the React, Vue, Angular, etc., this might be familiar to you already. Lifecycle methods let us control what happens when certain actions happen. For example, when the browser renders the button, we want to attach styles to it.

Lifecycle events for our Button component
Using the lifecycle callbacks

We can style our button via the standard CSSStyleDeclaration API. For example, <div style=”…”> uses the CSSStyleDecleration API.

Adding styles to our button

This references our class, WebComponentButton in this case. The above code will give our button a dark border with padding.

Styled button

Browser Support

Most modern browsers have decent web components support. Considering IE11 irrelevant, you should be good to go to use web components in production.

Web Components API Browser Support

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Simplicity matters. Grow together. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.