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. Standardized 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 standardize 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: Markup 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:
- Create a JavaScript class or function or export it from an existing JavaScript file using ES Modules.
- Define your new Custom Element using the CustomElementRegistry.define() method.
- If needed or desired, attach a hidden Shadow DOM in order to add child elements to your Custom Element.
- Define an HTML Template with the tags <template> and <slot>.
- 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:
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.
Related articles
Less CSS Tutorial
CSS is one of the most important languages in the World Wide Web. But working with the stylesheet language is often unnecessarily complicated, which is why many developers prefer to use Less instead. The CSS preprocessor not only makes writing stylesheet code easier, it also expands CSS with a range of features including variables, functions, and mixins. Our Less tutorial explains how it works.
Bootstrap alternatives
Bootstrap is the most popular framework solution for designing and creating high-performance web interfaces. It consists of a collection of HTML, CSS, and JavaScript components that Twitter released under the MIT free license in 2011, as well as a variety of extensions, interfaces for content management systems, and pre-built themes. There are also worthwhile alternatives to Bootstrap, which are…
REDPIXEL.PLShutterstock Web programming languages: the best languages for web development
So, you are looking to learn one or more web programming languages? The first challenge is to choose one. After all, there are hundreds of programming languages, but not all of them are good for web development. To make this decision easier for you and help you tackle your web project, we are going to provide a brief introduction to the most well-known web development languages.
spainter_vfxShutterstock Reverse engineering software
The process of “reverse engineering” allows you to understand the functionality and structure of software. By reverse engineering software down to the source code, it is not only possible to understand incorrect messages, but also to analyze competing programs. Reverse engineering can therefore be used in many ways. But how exactly is reverse engineering applied in software development?
Polyfill
Websites and apps are subject to constant change. New features and functions often promise a higher-value, securer or better-performing web project, which is why their implementation is often a mere formality. Many browsers, however, clearly lag behind when it comes to supporting cutting-edge web technologies – a problem that you can counteract with so-called polyfills.