Building Blocks of Web Components

Nipuna Gunathilake
Jan 5, 2019 · 4 min read
Image for post
Image for post
Taking a peek at the internals

In a previous article we discussed what Web Components are and how they can be useful for your project. In that I mentioned that they are made out of four main components.

In this article, we will take a look at these four building blocks that make up Web Components in a bit more detail.

This article is based on a talk I’ve given at the Colombo JavaScript Meetup. You can find the slides for that presentation here, and the source code in a github repo here.

Web Component Standards

There are four main standards that make up web components. Those are:

  1. Custom Elements
  2. Shadow DOM
  3. Templates
  4. HTML Imports (Currently replaced with ES Modules)
Image for post
Image for post
Building blocks of Web Components (source: http://webcomponents.github.io)

Combined with other web technologies, these new standards allows us to make useful Web Components.

We will look at each standard and how they enable the creation of Web Components.

1. Custom Elements

Image for post
Image for post

Custom elements are a set of APIs that give us the ability to create and register a custom component.

To create a custom component, you first need to create a class that extends HTMLElement. This class will handle things such as attribute binding, life cycle methods, template binding among other things.

Then, you can register the new component in the document as a valid custom component. The name must contain a hyphen.

With a component defined, you can simply use the <cmbjs-toggle> in your template as you would use other tags.

2. Template (and Slot)

Image for post
Image for post

With a component defined, we need a way to bind some HTML to it. If we used regular HTML for this, the browser would have to work rendering these items even before the component is displayed. Also, we won’t have a way to slot in custom items in to our custom component.

The template allows us to create inert DOM elements which we can then use in the web component.

We also have access to the new <slot> element which can be useful for slotting in items. If we have a slot element in the template, anything we have between our custom element tag will get slotted in there. We can have multiple named slots as well.

3. The shadow DOM

Image for post
Image for post

We need all the complex logic and the styles to stay inside the components we create. This is where the shadow DOM come in. Leaking styles could break the styling in the entire page.

The shadow DOM spec allows us to encapsulate the logic and styles in the component.

In the element class, we can append a shadow root and attach the template there. This creates a new shadow DOM in the DOM tree which will be separate from the overall app.

4. HTML Imports*

Image for post
Image for post

With our shiny new component created, we need a way to import and use it. This is where the HTML imports come in.

HTML imports provided us a way of easily importing the component into a page.

The bad news is(the reason for the astrix after the title) this feature would be dropped from Chrome soon and the other browsers don’t support it as well. So we would need to use ES6 imports to import web components for now.

The syntax for importing and using Web Components using HTML Imports used to look like this.

But it’s not all bad, HTML components might be re-visited sometime in the future. Until then we have module imports which once setup works really well.

Summary

We looked at the standards that were introduced to give browsers the ability to host Web Components and how they work together.

You can read a lot more technical details about in the MDN documentation here which goes into a lot more technical detail: https://developer.mozilla.org/en-US/docs/Web/Web_Components

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store