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 every day, 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 use Web Components?
- [Tutorial] How to create a Web Component? (this post)
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](#web-components-and-browser-support).
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:
- Custom Elements.
- HTML Templates.
- Shadow DOM.
- 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 on 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 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 and extending existing or other Web Components.
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!
An 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 is 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 its contents from its surrounding environment (a process called encapsulation), which prevents CSS and JavaScript code from leaking from and to a custom element.
4. 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.
The exceptions are Internet Explorer 11, and Safari. Microsoft stops supporting IE11 on August 17, 2021, and in the meantime, polyfills are available to simulate the missing browser capabilities as close as possible. Unfortunately, Safari is falling behind as well and doesn’t support Web Components, nor does Apple plan to fully support it in the future. Polyfills must be used for this browser as well.
Closing thoughts about Web Components
Modern Web Development becomes more complex every day, 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).
Its 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.
