Introduction to Web Components

Introduction to Web Components, new HTML tags with custom names.

Specifications
Vaadin and Web Components
External Links and References

Web Components are components that are built based on a collection of web standards in the HTML specification. The standards allow you to create new HTML tags with custom names that are reusable and to fully encapsulate their functionality and styles. The standards are supported by all modern browsers.

While Web Components are a new set of standards for the browsers, the basic HTML elements like input, select or textarea are native browser Web Components that follow the same concepts.

Specifications

The Web Component specification consists of four main standards [1] that can be used independently or together:

Custom Elements: A set of APIs to define new HTML elements and their functionality.
Shadow DOM: A set of APIs to provide encapsulation of the element’s styles markup and functions, so that the Web Component remains "hidden" and separate from the rest of the DOM.

Note

The shadow DOM can still be viewed and accessed
Everything in the shadow DOM can still be viewed and accessed
ES Modules: Defines standards for the inclusion and reuse of JavaScript documents in other JS documents. Enables modular Web Component development that conforms with JavaScript application development standards.
HTML Template: The <template> element allows you to input fragments of HTML that remain inert at page load, but can be instantiated at runtime.

Note

Importing and reusing custom components from an external source

An HTML Imports specification was proposed at draft stage. It wasn’t adopted after backlash from some modern browser vendors [2][3] and WebKit engineers [4]. This mechanism allows you to import and reuse custom components (or parts of them) from an external source.

See MDN Web Docs for more.