De­velopers have long been able to define reusable web elements using JavaS­cript frame­works such as React and Angular. However, each framework uses a different standard which often prevents useful snippets of code from being used across different projects. This problem can be overcome by using web com­pon­ents which are reusable HTML com­pon­ents that can be used re­gard­less of the framework. Stand­ard­ised in 2012, the web element type is now supported by all current browsers.

What are web com­pon­ents?

Web com­pon­ents are blocks of code that en­cap­su­late the core structure of HTML elements including CSS and JavaS­cript and enable the code to be used anywhere in websites and web apps. This concept was developed by a working group from the World Wide Web Con­sor­ti­um (W3C), which was founded by the inventor of the web Tim Berners-Lee in 1994 and has since aimed to stand­ard­ise all basic web tech­no­lo­gies. The web component model, which was published as a standard in 2012, provides the following four main spe­cific­a­tions for the creation of useful HTML com­pon­ents:

  • Custom Elements: A set of JavaS­cript APIs for defining user-defined custom elements
  • Shadow DOM: A set of JavaS­cript APIs for adding DOM elements
  • ES Modules: Modules for in­teg­rat­ing and reusing JavaS­cript documents
  • HTML Templates: Mark-up templates which do not appear on the displayed page and can be used as a basis for user-defined elements

The web component standard is now supported by all current browsers. All JavaS­cript frame­works and libraries that work with HTML can be used to work with en­cap­su­lated HTML tags.

Why should you use web com­pon­ents?

Libraries and frame­works such as Angular and jQuery have been ranked among the most important tools for web pro­gram­mers for years because they reduce the amount of work in de­vel­op­ing projects greatly. However, as practical and versatile as these basic code struc­tures are, they are also often in­flex­ible when it comes to cross-project use. It is not uncommon for de­velopers to have to rewrite or modify code if, for example, the framework has to be changed. This is why the World Wide Web Con­sor­ti­um (W3C) in­tro­duced web com­pon­ents and thus a universal framework for the simple and unified reuse of HTML, CSS and JavaS­cript code.

Since these universal web elements have simple and easy-to-learn syntax, novice pro­gram­mers benefit from the W3C standard. In recent years, Google has been working on de­vel­op­ing libraries and templates for pro­gram­ming web com­pon­ents and making them freely available as part of the “Polymer Projects”.

An overview of the elements of web com­pon­ents

The web component model is based on four main spe­cific­a­tions which will be discussed in more detail below. In addition, we will provide some specific examples of the web component spe­cific­a­tions.

Custom Elements

Custom Elements (i.e. user-defined elements) are HTML tags which en­cap­su­late the content of HTML including CSS commands and scripts. They are defined in the Cus­tom­Ele­men­tRe­gistry. The following are their key features:

  • They end with a closing tag.
  • Their names are DOM strings and always contain a hyphen.
  • Their names can only appear once in the Cus­tom­Ele­men­tRe­gistry.

To create a Custom Element, you need to use JavaS­cript and the define method. The following web com­pon­ents example shows a custom element that can be used to include an in­di­vidu­al button:

customElements.define(‘my-button', MyButton, { extends: 'p' });

All you need to use this element in a web ap­plic­a­tion now is the following code:

<my-button></my-button>

Shadow DOM

The most important feature of web com­pon­ents is their ability to en­cap­su­late HTML elements. The Shadow DOM API helps by allowing you to attach hidden DOM trees to a document tree. Therefore, only the Shadow DOM’s HTML tag is visible. This lets you add HTML elements to the hidden DOM without having to change the main DOM each time. You can find more detailed in­form­a­tion about this tech­no­logy as well as ap­plic­a­tion examples in our article about Shadow Doms and how they work.

ES Modules

ES Modules are modules that export objects, functions or variables from a JavaS­cript file. This feature makes it possible to divide variables in a file into groups and to reference them. There are currently two ES Module systems. While CommonJS was ori­gin­ally part of Node.js, the latest system has already been included in JavaS­cript ES6.

To export a function from a JavaS­cript library, use the export method. In the following example, you are exporting a function that repeats the input string twice.

// ? lib.bib1
export const repeat = (string) => `${string} ${string}`;
}

You can now use import to use the exported function whenever you wish.

main.mjs
import {repeat} from ‘./lib.my';
repeat (‘hello');
// → ‘hello hello'

HTML Templates

An HTML Template is a template for HTML files. The elements included remain inactive and un­rendered until they are ex­pli­citly requested. This feature means that they do not have a negative effect on the website’s load time. They are thus a useful al­tern­at­ive to con­ven­tion­al JavaS­cript methods.

To define an HTML Template, you use the <template> tag. In the following example, you are creating a template named “My element”.

<template id=”my-element">
<p>My element</p>
</template>

To use the template in a website, use the JavaS­cript methods getEle­ment­by­Id and content and attach it to the DOM.

let template = document.getElementById(‘my-element');
let templateContent = template.content;
document.body.appendChild(templateContent);

How do you use web com­pon­ents?

The examples described above for web com­pon­ents only work if you use the in­di­vidu­al elements of the web com­pon­ents model together. The following is a sim­pli­fied de­scrip­tion of the procedure:

  1. Create a JavaS­cript class or function or export it from an existing JavaS­cript file using ES Modules.
  2. Define your new Custom Element using the Cus­tom­Ele­men­tRe­gistry.define() method.
  3. If needed or desired, attach a hidden Shadow DOM in order to add child elements to your Custom Element.
  4. Define an HTML Template with the tags <template> and <slot>.
  5. Use the generated Custom Element in your website like an ordinary HTML element.

The following tutorial provides an easy-to-follow in­tro­duc­tion to pro­gram­ming web com­pon­ents:

mTNdTcwK3MM.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.

Com­pat­ib­il­ity of web com­pon­ents with different browser versions

Browser com­pat­ib­il­ity with web com­pon­ents was not guar­an­teed in previous versions. However, all current browser versions now support Custom Elements, Shadow DOM, ES Modules and HTML Templates. The following table provides an overview of browser com­pat­ib­il­ity with the different web com­pon­ents.

Com­pat­ible? Firefox Chrome Edge Safari Opera
Custom Elements Yes Yes Yes (version 76 or higher) Yes Yes
Shadow DOM Yes Yes Yes (version 75 or higher) Yes Yes
ES Modules Yes Yes Yes Yes Yes
HTML Templates Yes Yes Yes Yes Yes

Libraries, templates, and examples for web com­pon­ents

Pro­gram­ming web com­pon­ents can be com­plic­ated, es­pe­cially for beginners. However, on the web, you can find numerous libraries with templates and standard functions as well as practical examples for web com­pon­ents which will make your work easier.

  • Lit Element: A simple basic class for creating web com­pon­ents.
  • Polymer Project: As part of the Polymer Project, Google offers a number of tools for working with web com­pon­ents, such as a starter kit for pro­gram­ming apps with web com­pon­ents, an HTML Template library for JavaS­cript and a variety of ready-to-use elements.
  • Hybrids: Provides a simple UI library for creating web com­pon­ents.
  • Slim.js: A library with ad­di­tion­al features for web com­pon­ents which uses JavaS­cript ES6’s class-based in­her­it­ance.
Go to Main Menu