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.
Now is the perfect moment to start learning about Web Components, because they are getting more popular every day!
- What are Web Components? (this post)
- Why use Web Components?
- [Tutorial] How to create a Web Component?
The four Standards used are:
- Custom Elements.
- HTML Templates.
- Shadow DOM.
- ES Modules.
Let's have a more detailed look at these Web Standards.
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.
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!
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.
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.
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.
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 does provide support, but it does not support Customized Built-in Elements, only Autonomous Elements. Luckily, the polyfills offer support for Safari as well.
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.
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.
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.