Docs

Docs

Introduction to Web Components

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

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.

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

7F8B244C-5C1C-4591-9998-190D78A3F114