Web components explained

Developers have long been able to define reusable web elements using JavaScript frameworks 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 components which are reusable HTML components that can be used regardless of the framework. Standardised in 2012, the web element type is now supported by all current browsers.

What are web components?

Web components are blocks of code that encapsulate the core structure of HTML elements including CSS and JavaScript 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 Consortium (W3C), which was founded by the inventor of the web Tim Berners-Lee in 1994 and has since aimed to standardise all basic web technologies. The web component model, which was published as a standard in 2012, provides the following four main specifications for the creation of useful HTML components:

  • Custom Elements: A set of JavaScript APIs for defining user-defined custom elements
  • Shadow DOM: A set of JavaScript APIs for adding DOM elements
  • ES Modules: Modules for integrating and reusing JavaScript 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 JavaScript frameworks and libraries that work with HTML can be used to work with encapsulated HTML tags.

Why should you use web components?

Libraries and frameworks such as Angular and jQuery have been ranked among the most important tools for web programmers for years because they reduce the amount of work in developing projects greatly. However, as practical and versatile as these basic code structures are, they are also often inflexible when it comes to cross-project use. It is not uncommon for developers to have to rewrite or modify code if, for example, the framework has to be changed. This is why the World Wide Web Consortium (W3C) introduced web components and thus a universal framework for the simple and unified reuse of HTML, CSS and JavaScript code.

Since these universal web elements have simple and easy-to-learn syntax, novice programmers benefit from the W3C standard. In recent years, Google has been working on developing libraries and templates for programming web components and making them freely available as part of the “Polymer Projects”.

An overview of the elements of web components

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

Custom Elements

Custom Elements (i.e. user-defined elements) are HTML tags which encapsulate the content of HTML including CSS commands and scripts. They are defined in the CustomElementRegistry. 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 CustomElementRegistry.

To create a Custom Element, you need to use JavaScript and the define method. The following web components example shows a custom element that can be used to include an individual button:

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

All you need to use this element in a web application now is the following code:

<my-button></my-button>

Shadow DOM

The most important feature of web components is their ability to encapsulate 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 information about this technology as well as application 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 JavaScript 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 originally part of Node.js, the latest system has already been included in JavaScript ES6.

To export a function from a JavaScript 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 unrendered until they are explicitly requested. This feature means that they do not have a negative effect on the website’s load time. They are thus a useful alternative to conventional JavaScript 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 JavaScript methods getElementbyId 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 components?

The examples described above for web components only work if you use the individual elements of the web components model together. The following is a simplified description of the procedure:

  1. Create a JavaScript class or function or export it from an existing JavaScript file using ES Modules.
  2. Define your new Custom Element using the CustomElementRegistry.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 introduction to programming web components:

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

Compatibility of web components with different browser versions

Browser compatibility with web components was not guaranteed 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 compatibility with the different web components.

Compatible? 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 components

Programming web components can be complicated, especially for beginners. However, on the web, you can find numerous libraries with templates and standard functions as well as practical examples for web components which will make your work easier.

  • Lit Element: A simple basic class for creating web components.
  • Polymer Project: As part of the Polymer Project, Google offers a number of tools for working with web components, such as a starter kit for programming apps with web components, an HTML Template library for JavaScript and a variety of ready-to-use elements.
  • Hybrids: Provides a simple UI library for creating web components.
  • Slim.js: A library with additional features for web components which uses JavaScript ES6’s class-based inheritance.
Was this article helpful?