Web Components 101: What are Web Components?

Welcome to the Web Components 101 Series! We're going to discuss the state of Web Components, provide expert advice, give tips and tricks and reveal the inner workings of Web Components.

Today, more than 10% of all page loads in Google Chrome are pages that contain Web Components! Big tech companies like Apple, Google and Facebook are also investigating ways of using Web Components in their applications and JavaScript Frameworks (e.g. Angular and React). Quite impressive for a technology officially introduced in 2011 and standardized only recently.

Web Components are getting more popular everyday, that's why this is the perfect moment to start learning about this awesome technology!

About the author

Stefan is a JavaScript Web Developer with more than 10 years of experience. He loves to play sports, read books and occasionally jump out of planes (with a parachute that is).
☞ If you like this article, please support me by buying me a coffee ❤️.

Posts in the Web Components 101 series

• What are Web Components? (this post)
• Why do you need Web Components? (coming soon)

What are Web Components?

Web Components are full HTML elements with custom templates, APIs and Tag Names. They allow you to create new HTML tags, extend existing HTML tags or extend the components from other developers. They can be used in any web application, are compatible with (or without) any JavaScript library or framework (e.g. React, Angular, Vue.js, Next.js) and will work with all modern browsers.

Its foundation is its API, which brings a Web Standards-based way to create reusable components using nothing more than vanilla JavaScript, HTML and CSS.

The four Standards used are:

1. Custom Elements.
2. HTML Templates.
3. Shadow DOM.
4. ES Modules.

Let's have a more detailed look at these Web Standards.

1. Custom Elements

Custom Elements is a set of APIs that allows you to create new HTML tags. With this API, we can instruct the parser how to properly create an element and how it reacts to changes.

There are two types of custom elements:

1. An autonomous custom element, which can be used to create completely new HTML elements.
2. A customized built-in element, which can be used to extend existing HTML elements or other Web Components.

So, the Custom Elements API is very useful for creating new HTML elements, but for extending existing or other Web Components as well.

2. HTML Templates

With HTML templates, we can create reusable code fragments inside a normal HTML flow that aren't rendered immediately. They can be cloned and inserted in the document during runtime with JavaScript and scripts, and resources inside will not be fetched or executed until the template is stamped out. It also doesn't matter how many times a template is used, since it's cloned in the browser and only parsed once; A great performance boost!

A HTML Template syntax looks like this:

<template>
  <h1>Web Components 101</h1>
  <p>HTML Templates are awesome!</p>
</template>

When the page renders, a template is empty. The contents are stored in a DocumentFragment without browsing context. This is done to prevent it from interfering with the rest of the application, meaning that it only renders when requested; Another performance boost!

3. Shadow DOM

The Shadow DOM API allows web browsers to isolate DOM fragments (including all HTML and CSS) from the main documents DOM tree. Its inner working are almost similar to that of an <iframe/> where the content is isolated from the rest of the document, with the main difference that we still have full control over it.

What is the DOM?

With HTML, we're able to easily create pages that have both presentation and structure. It's very easy for us humans to understand, but computers need a bit more help: Enter the Document Object Model, or DOM.

When the browser loads a web page, it translates the author's HTML into a data model, which is stored in a tree of nodes. This tree is called the DOM and is a live representation of the page. It has properties, methods and the best part is that it can be manipulated by...JavaScript!

The Shadow DOM shields it contents from its surrounding environment (a process called encapsulation), which prevents CSS and JavaScript code from leaking from and to a custom element.

ES Modules

Before ES Modules, JavaScript did not have a module system like other programming languages. Developers resorted to using <script/> tags to load JavaScript files into their applications and later on, several module definitions started (e.g CommonJS, AMD & UMD) to appear but none matured to a standard. This changed with the introduction of ES Modules and we finally have a standard module system.

The ES Modules API brings a standardized module system to JavaScript, which provides a way of bundling a collection of features into a library that can be reused in other JavaScript files.

Web Components and Browser Support

Which browsers support Web Components? Currently, all Evergreen browsers (Chrome, Firefox and Edge) offer full support for Web Components. That means, all APIs (i.e. Custom Elements, HTML Templates, Shadow DOM and ES Modules) are fully supported!

This screenshot from WebComponents.org shows the current browser support for Web Components.

Internet Explorer

Unfortunately, Internet Explorer 11 doesn't support Web Components, but Microsoft stops supporting IE11 on August 17, 2021, and in the meantime, polyfills are available to simulate the missing browser capabilities as closely as possible.

Safari

Safari does support Web Components, but it does not support Customized Built-in Elements, only Autonomous Elements. Luckily, the polyfills offer support for Safari as well.

Closing thoughts about Web Components

Modern Web Development becomes more complex everyday, and, now that the Web Platform and its standards are maturing, it makes more sense to use them more intensively. Web Components are the perfect example, based on 4 web-standard based APIs (Custom Elements, HTML Templates, Shadow DOM, and ES Modules).

It's ever increasing popularity proofs that Web Components are here to stay and that now is the perfect time to start learning about this amazing technology!

In the second post of the series, we're gonna discuss why Web Components are so amazing and why you want to use them.