Lately, there has been a lot of buzzes and hype on web components, but not everyone knows exactly what it is, how it works or why it's even needed, that's going to change soon because we are going to be taking a peek 🤓.
🤔 What are Web Components?
Well according to MDN Web Docs.
Web Components is a suite of different technologies allowing you to create reusable custom elements with their functionality encapsulated away from the rest of your code and utilize them in your web apps.
But I would like to simplify that:
Web Components allows you to create components or UI controls that are universal and can be reused in any web app, regardless of what the app is built with, it can be React, Vue, Angular, Svelte, etc or even without a framework (vanilla js, HTML5, CSS3).
Why do we even need Web Components? 🤷🏻‍♂️
Reusability of code has proven to be useful, and before web components, it's been quite difficult to implement reusable UI controls that work across diverse frameworks and projects.
Web Components allow us to build reusable UI controls, using built-in Web APIs.
How does it work? ⚙️
Web components consist of 3 main technology, which can be used to build custom elements.
- Custom Elements
- Shadow DOM
- HTML Templates
These are the building blocks of web-components, can be used together or in isolation. Let's take a deeper dive.
Custom Elements:
These are custom HTML elements that have a custom behavior, functionality, template, and tag name built on a set of javascript API called Custom Elements API.
Let's create a simple element.
Shadow DOM:
This is for isolating components (CSS, Javascript) of a custom HTML element by encapsulating its resources in a DOM different from the main document's DOM.
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.
Let's have a feel of the shadows:
HTML Templates:
The and elements let you write mark up templates that are not rendered but can be reused multiple times as the base of a custom element.
It's time to create some template:
You should be ready to explore web components now.
Resources:
MDN web documentation: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
More to come on web components, watch out đźš©
Top comments (0)