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!
☞ If you like this article, please support me by buying me a coffee ❤️.
- What are Web Components? (this post)
- Why do you need Web Components? (coming soon)
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 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.
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!
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.
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 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.
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.