Building a skeleton web component with a shadow root

19 Jul 2019

Web Components

Web components are self-contained elements that have their own HTML, CSS and JavaScript associated them. They are useful for building reusable widgets that can be dropped into any page without the style or behavior effecting the surrounding page.

Most of the tutorials on web components are pretty complicated. After learning about them for a while, I found that it is easy to get started with them when you build your understanding of them up in layers. So I wrote the bare minimum code needed to create a simple hello world component. This component is just a hello world heading element with a font family applied through the shadow DOM.

Web Component Skeleton

This is a web component skeleton that has a self contained DOM including HTML and styles that are not included in the flow of the light DOM. You can use the component in your main DOM by using the the tag we defined for it. In this case, the tag is <bw-skeleton-component/>.

Skeleton Web Component
    
      class Component extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: 'open' });
          this.shadowRoot.innerHTML = `
            
            

Hello World!

`; } } customElements.define('bw-skeleton-component');

Before we create a web component, it is a good idea to think about how you want to use it before writing any code to build it. As this is just a simple hello world component, I'll just walk through what the code you need to create a skeleton component does.

class Component extends HTMLElement { }

The first thing we do is create a class with the name of our component. A class is like a car stamp that we use to stamp lots of little cars all over our page/s.

It is a JavaScript convention to start our class name with an uppercase letter (PascalCase). We do this to make it easier to spot the difference between a class and a variable, which are usually named with lower case letters.

In this case, we are creating a class as an extension of another class using he 'extends' keyword. Extending a class just means that your class contains all of the functionality of the class you are extending, which is in addition to any of the functionality that you define.

The class that we are extending is the HTMLElement class. We need to extend this class so that we can create our own HTMLElement that we can use like any other HTMLElements (adding event listeners, targeting with CSS, JS etc).

When creating a component, you can also extend classes that belong to existing HTML elements. For example, if you wanted to create a tip component that styles a paragraph element in a specific way, you could extend the HTMLParagraph element instead of the more generic HTMLElement class.

In most cases, you are likely going to build web components that are nothing like existing HTML elements. A pop-up is a good example of the type of web component you are likely to want to build.

constructor() { }

Inside of our newly created component class, we have added a method called 'constructor()'. This is one of four methods that make up a components lifecycle, and so they are called "Lifecycle methods". A brief explanation of each is included below.