Introduction to Web Components
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.
NoteThe shadow DOM can still be viewed and accessedEverything 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:
* Vaadin Components: A modern set of Web Components for business applications. * Integrating a Web Component into Vaadin. * Vaadin Directory: A list of curated and rated third-party Web Components.