Web Components

- The Standard Component Model

Web Components is a set of features that provides a standard component model for the Web, allowing individual HTML elements to be encapsulated and interoperated. 

Web Components is based on four main specifications:

• Custom Element: The Custom Elements specification provides the basis for designing and using new types of DOM elements. 
• Shadow DOM: The Shadow DOM specification defines how to use encapsulated styles and markup in Web Components. 
• ES Module: The ES Modules specification defines the inclusion and reuse of JS documents in a standards-based, modular, and performant manner. 
• Web Template: The HTML Template Elements specification defines how to declare fragments of markup that are not used at page load time but can be instantiated later at runtime.

- The Purpose of Web Components

Web components are a way to create encapsulated, single-responsibility blocks of code that can be reused on any page. Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML markup for use in web pages and web applications. Custom components and widgets are built on the Web components standard, work across modern browsers, and work with any JavaScript library or framework that supports HTML.

Web components are based on existing web standards. Support for web components is currently being added to the HTML and DOM specifications, allowing web developers to easily extend HTML with new elements with encapsulated styles and custom behavior.

Consider the HTML <video> tag. Given a URL, viewers can use controls such as play, pause, rewind, fast forward, and adjust volume. 

Styling and functionality are provided, but you can modify them using various properties and JavaScript API calls. Any number of <video> elements can be placed inside other tags, they will not conflict.

What if you need your own custom functionality? For example, an element that shows the word count of the page? No HTML <wordcount> tag (yet).

Frameworks such as React and Vue.js allow developers to create web components where content, styling, and functionality can be defined in a single JavaScript file. These solve many complex programming problems, but keep in mind:

• You have to learn how to use the framework and update your code as it evolves.
• Components written for one framework are rarely compatible with another.
• Frameworks rise and fall in popularity. You become dependent on the whims and priorities of the development team and users.
• Standard web components can add browser features (such as Shadow DOM) that are difficult to achieve with JavaScript alone.

Fortunately, popular concepts introduced in libraries and frameworks often find their way into web standards. It took a while, but the web components are here.

Applying modular concepts to a single programming language is simple, but web development requires a combination of technologies. 

- Libraries for Building Web Components

Many libraries already exist to make building web components easier. The library section of the site has more details, but you can try the following:

• Hybrids is a UI library for creating web components with a simple and functional API.
• LitElement uses lit-html to render into the element's Shadow DOM and adds an API to help manage element properties and attributes.
• Polymer provides a set of functions for creating custom elements.
• Slim.js is an open source lightweight web component library that uses es6 native class inheritance to provide data binding and extension capabilities for components.
• Stencil is an open source compiler that generates standards-compliant web components.

[More to come ...]