Before we get into web components, you need to know why we are learning about them. Well, we are learning about web components because Angular 2 components utilize shadow DOM and templates, which are a part of web components.
In a nutshell, web components are a collection of four different browser specifications that enable the creation of reusable components in web pages. These four specifications are HTML imports, shadow DOM, templates, and custom elements. They can be used together or separately.
Web components provide native implementation of component-oriented architecture. A component created using web components is called a web component as well.
Before we learn about web components, let's consider a project for demonstration purposes. Create a directory named web-components, and then create a file named index.html in it. Web components have pretty poor browser support, so let's download webcomponents.js polyfill. Download the webcomponents.js file from https...