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:
- 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 how to properly create an element and how it reacts to changes.
There are two types of custom elements:
- An autonomous custom element, which can be used to create completely new HTML elements.
- 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.
Top comments (4)
Good to know that all browsers support it. Back in 2018, some of them were using polyfills. devopedia.org/web-components
Thanks for your reply! Browser support for Web Components is indeed growing. Mind that Safari and IE11 don't provide support (and probably never will). Luckily, we can use polyfills. Source: nhswd.com/blog/web-components-101-...
Hold your horses!
Safari does support Web Components;
and has done so for a very long time!!
Safari does not support Customized Built-In Elements, (eg. extend
HTMLButton)only Autonomous Elements that extend from
HTMLElementNote that all BaseClasses: Lit, Stencil, Ionic etc, only extend from
HTMLElementalso.So Customized Built-In Elements can only be created with Vanilla code. But is generally considered a dead end because Apple has some valid arguments against the implementation.
Thanks so much for elaborating! It's true that Safari only supports Autonomous Elements! I'll update my article accordingly.