Learning

Web Components

Introduction Custom Elements Attributes Shadow DOM Slots Styles Form Other Information

Introduction
Source on GitHub

Creating you own custom HTML tags can make web development easier and simpler to do. Build a reusable component, with some simply attributes, that hides away all of the complexity within. Web components are a great tool, that, when given the time to understand and master, can take the stress away from the constant new releases of modern web frameworks. They work off well established web standards that will not change in the future, so something you create today should work many years from now.

Tags

There are different HTML tags that can be used to format a web page, <p>, <b>, <div>, <input> and so many others. With web components you can create your own and give the name of the tag whatever you want (with some limitations).

<my-tag></my-tag>

Looks simple right? But at the moment it doesn't do anything. We need to add some JavaScript code to make it useful. Each custom tag has a JavaScript class object linked to. For each tag and new instance of the class is created. Lets create the MyTag JavaScript class.

class MyTag extends HTMLElement {
  constructor() {
    super();
    this.innerText = new Date().toLocaleString();
  }
}
customElements.define('my-tag', MyTag);

The first line declares our MyTag class and derives it from the HTMLElement class. This means our class can use all the functions and properties that belong to HTMLElement.

The next part is the constructor. This function is called whenever a new instance of our class is created. At some point within the constructor we must call the super function. This calls the HTMLElement's constructor, which itself will call its super function, all the way down to the base class (Object).

Next, and still inside the constructor, we add some example code, to setting the inner text to the current date and time.

The final part is to tell the browser to link all <my-tag> tags to the MyTag class. We call the customElements function define with the name of the tag (without the <> parts) and the class it is linked to.

The end result is, that wherever we use the <my-tag> tag, the browser will show the date and time (when the class was created).

So how does it look, what is going on in the browser? Take a look at the this example page.

In the HTML there are the <my-tag></my-tag> tags. These get read in by the browser, and because there is a link between this tag and the MyTag class, it creates a new instance of the MyTag class and calls its constructor. Inside the constructor it sets the element's inner text to the current date and time.

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <p>...</p>
    <my-tag>8/20/2022 11:10:46 AM</my-tag>
  </body>
</html>

In the DOM we see the <my-tag> parts are there and inside it there is text. The text is the date and time we inserted.

Adding to HTML

Before we can start using the new tag, we need to make sure the JavaScript parts are read in by the browser. The best method for this is put a web component's code into a single JavaScript (*.js) file, and then use the <script> tag in the HTML's <head> section.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="my-tag.js"></script>
  </head>
  <body>
  ...
  </body>
</html>

It is best to use the latest module system with web components, so when you are using the <script> tag you will need to include the type="module" attribute.

For testing and quick demos you can have the JavaScript code embedded into the HTML. Not the best idea however.

<!DOCTYPE html>
<html lang="en">
<body>
  <my-tab></my-tab>
  <script type="module">
  class MyTag extends HTMLElement {
    constructor() {
      super();
      this.innerText = new Date().toLocaleString();
    }
  }
  customElements.define('my-tag', MyTag);
  </script>
</body>
</html>

More to See

Web components are based off some simple ideas and can be used to create some truly impressive stuff. There are a lot more things to explore and more details to uncover. Once you start creating your own custom elements you'll find it hard to use anything else.

Below are some of the areas we will be looking into.

Custom Element

Take a detailed look into what custom elements are and how they work.

Attributes

Add custom attributes to you web component and react to them changing.

Shadow DOM

Learn how to work with the shadow DOM to create a barrier between your web components HTML and the rest of the HTML document.

Slots

Extend your web component with customizable areas where extra HTML parts can be added.

Styles

Understand how to style the many parts of a web component and what CSS selectors are available.

Form

Create your own input like web component that works with form elements.