> Markdown version of [Introduction to Web Components](https://vaadin.com/docs/v10/flow/web-components/introduction-to-webcomponents). Section index: [llms.txt](https://vaadin.com/docs/v10/flow/llms.txt)

# 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*

## <a id="specifications"></a>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].*

## <a id="vaadin-and-web-components"></a>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](https://vaadin.com/flow).

To find out more how Vaadin utilizes Web Component:

- [Vaadin Components](https://vaadin.com/components), a modern set of Web Components for business applications.

- [Using any Web Component in Java web applications](https://vaadin.com/docs/v10/flow/web-components/integrating-a-web-component.md) with Vaadin Flow

- [Vaadin Directory](https://vaadin.com/directory) - Listing of curated and rated third party Web Components.

## <a id="external-links-and-references"></a>External links and references

\[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>