Welcome to the Web Components 101 Series! We'll discuss the state of Web Components, provide expert advice, give tips and tricks. We'll also 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.
Now is the perfect moment to start learning about Web Components, because they are getting more popular every day!
Posts in the Web Components 101 series
- What are Web Components? (this post)
- Why use Web Components?
- [Tutorial] How to create a Web Component?
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. Any JavaScript library or framework (e.g. React, Angular, Vue.js, Next.js) is compatible, all modern browsers provide support, and applicable to any web application.
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:
- Autonomous custom elements: Create completely new HTML Elements.
- Customized built-in elements: Extend existing HTML and Custom elements.
The Custom Elements API is very useful for creating new HTML elements, and 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 doesn't render immediately. We can use JavaScript to clone and insert them in the document during runtime. Scripts and resources inside are not fetched or executed until the template is stamped out.
It 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. It only renders when requested to prevent it from interfering with the rest of the application. 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.
Shadow DOM knows 2 modes: open and closed. Open means that you can access it using JavaScript written in the main page context. Closed means that you won't be able to access it from outside.
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.
The browser translates the author's HTML into a data model when it loads a web page. This model is the DOM and is a live representation of the page. It has properties, methods and is accessible and editable with...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 is a standardized module system for JavaScript. It provides a way of creating libraries of bundled features, reusable in other JavaScript files and apps.
Web Components and Browser Support
Which browsers support Web Components? Currently, all Evergreen browsers (Chrome, Firefox, and Edge) offer full support for Custom Elements. That means full support for all APIs (i.e. Custom Elements, HTML Templates, Shadow DOM, and ES Modules)!
This screenshot from WebComponents.org shows the current browser support for Web Components.
Internet Explorer
Unfortunately, Internet Explorer 11 doesn't provide support, but Microsoft stops supporting IE11 on August 17, 2021. In the meantime, polyfills are available to simulate the missing browser capabilities as close as possible.
Safari
Safari does provide support, but it does not support Customized Built-in Elements, only Autonomous Elements. Luckily, the polyfills offer support for Safari as well.
Web Components and Framework Support
As you can see on Custom Elements Everywhere, the support for Web Components is excellent and ever growing! AngularJs, Angular, and Vue are fully compatible with Web Components.
React
Unfortunately, React is behind and partly supports Web Components.
All data is passed to Custom Elements as HTML attributes, and that's a problem. It's fine for primitive data (e.g. string, number, bigint, boolean, undefined, symbol, and null) but not for rich data, like objects or arrays. There are no signs that this is going to be solved soon. Back in 2016, this issue on properties and attributes on properties and attributes was reported, went stale a couple of times, and is still relevant today.
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 them!
In the second post of the series, we're gonna discuss why Web Components are so amazing and why you want to use them.