What are Web Components?

Web Components are components built based on collection of web standards in the HTML specification. The standards allow you to create new HTML tags with custom names that are reusable and 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’s specification consist 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
    		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 aligns 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
An HTML Imports specification was proposed at draft stage. It was not 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 thereof) from an external source.

See MDN Web Docs for more.

Vaadin and Web components

Vaadin provides and maintains a set of Web Components and corresponding Java APIs.

To learn more about how Vaadin utilizes Web Components, see:

[1] https://github.com/w3c/webcomponents/

[2] https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

[3] https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports

[4] https://webkit.org/status#feature-html-imports