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.
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
☞ 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?
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
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.
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.
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 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
only Autonomous Elements that extend from
Note that all BaseClasses: Lit, Stencil, Ionic etc, only extend from
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.