Web Components tutorials

This repository contains the code I wrote to go along with web component posts. To run the code, you need a static server. I use static-server for it. Go to either directory and run:

$ static-server

Then navigate to localhost.

Links to tutorials:

1. Part 1: HTML Web Component using Vanilla JavaScript
2. Part 2: Making Higher Order Components
3. Part 3: Using Attributes to define web components' behavior

Components Created for examples:

Part 2:

Part 3:

About Web Components:

The HTML and DOM standards define four new standards/APIs that are helpful for defining Web Components. These standards are:

1. Custom Elements: With Custom Elements, web developers can create new HTML tags, beef-up existing HTML tags, or extend the components other developers have authored. This API is the foundation of Web Components.
2. HTML Templates: It defines a new <template> element, which describes a standard DOM-based approach for client-side templating. Templates allow you to declare fragments of markup which are parsed as HTML, go unused at page load, but can be instantiated later on at runtime.
3. Shadow DOM: Shadow DOM is designed as a tool for building component-based apps. It brings solutions for common problems in web development. It allows you to isolate DOM for the component and scope, and simplify CSS, etc.
4. HTML Imports: While HTML templates allow you to create new templates, HTML imports allows you to import these templates from different HTML files. Imports help keep code more organized by neatly arranging your components as separate HTML files.