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
textarea are native browser Web Components that follow the same concepts.
The Web Component specification consists of four main standards  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
HTML Template: The
<template>element allows you to input fragments of HTML that remain inert at page load, but can be instantiated at runtime.
Importing and reusing custom components from an external sourceAn HTML Imports specification was proposed at draft stage. It was not adopted after backlash from some modern browser vendors  and WebKit engineers . 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.