What are Web Components?
-
Web Components are a collection of web standards allowing you to create new HTML tags with custom name, reusability and full encapsulation on styles & markup. The standards are promised to be ubiquitous in modern browsers.
-
The term "Web Components" might seem unfamiliar at first but in fact, you are already using web components(*) when you develop. HTML elements like input, select, or textarea are all browser native web components. In short, native elements have followed the concept of the web components for a long time now.
(*) Not to be confused with the uppercase initials - Web Components
Specifications
Web Components consist of four main standards [1] which can be used independently or all together:
-
Custom Elements: A set of APIs to define new HTML elements and their functionalities.
-
Shadow DOM: A set of APIs to provide encapsulation of the element’s styles markup and functions so that your web component may remain "hidden"* and separated from the rest of the DOM.
-
HTML Template: The <template> element allows you to input fragments of HTML, which remain inert at page load, but can be instantiated at runtime.
-
HTML Imports **: A mechanism allows you to import and reuse a piece or the whole custom component from an external source.
*everything in the shadow DOM can still be viewed and accessed.
**HTML Imports is not standardized. It was a specification at the phase of the draft but received a heavy backlash from some modern browser vendors [2][3] and WebKit engineers [4].
Vaadin and Web components
Vaadin both makes and maintains a set of Web Components as well as uses them to provide Java web devevelopers API through Vaadin Flow.
To find out more how Vaadin utilizes Web Component:
-
Vaadin Components, a modern set of Web Components for business applications.
-
Using any Web Component in Java web applications with Vaadin Flow
-
Vaadin Directory - Listing of curated and rated third party Web Components.