Hello and welcome to my new blog series on the JavaScript Ecosystem. I hope you and everyone in your acquaintance are staying safe and healthy in these unprecedented times. I am starting this blog series as a part of a new venture of exploring and practically implementing different libraries in JavaScript and Node.js. I wish to structure this series in a way that assists web developers in exploring and getting started with a new library, framework, or technical concept. Hope you guys enjoy learning!

Introduction

In the first blog post of this series, let’s not talk about any libraries and frameworks but let’s dive into Vanilla JavaScript _(No Libraries. No Frameworks. Just the programming language JavaScript)_and implementing the concept of Web Components without using any existing libraries or frameworks. Web Components have played a huge role in driving modern web user interfaces and the underlying concept is used as the basis of the architecture of many web applications built using frontend frameworks like ReactJS, VueJS, and Angular. According to MDN docs:

Web components can be defined as a suite of different technologies allowing you to create reusable custom HTML elements with their functionality encapsulated away from the rest of your code and utilize them in your web apps.

The concept of simple browser-based web components consists of three main technologies:

1. Custom Elements — Set of JavaScript API methods to define custom HTML elements, modify their behavior, and reuse as required in the UI.
2. Shadow DOM — Set of JavaScript API methods for attaching an encapsulated “shadow” DOM tree to an element. In simple words, the Shadow DOM API provides an effective way of attaching a hidden separated DOM to an HTML element keeping element features private and encapsulated from the rest of the document.
3. **HTML Templates **— The HTML tags that are not displayed in the rendered page are 

#vanillajs #javascript #programming #web-development #web-components