What are Web Components?

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

    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 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 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:

    • with Vaadin Flow

    [1] https://github.com/w3c/webcomponents/

    [2]

    [3] https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports