What are Web Components?

Web Components consist of several separate technologies, you can understand a Web Component as a widget that can be used several times. They do not need external / additional libraries like jQuery and can be used without necessarily writing a code script, for example import / inject a widget (which in this case is an html snippet) to an existing HTML page. Web Components are not yet complete, so modern browsers support some of the technologies and some are still under development.

Web Components consists of 4 technologies:

• Custom Elements - Supported only on Chrome 54+ and Opera 41+
• HTML Templates - Supported on Chrome 49+, Edge 13+, Safari 9.1+, iOS Safari 9.3+, Android 4.4+ (native browser), Firefox 47+
• Shadow DOM - Chrome 49, Safari 10, Android 4.4 with -webkit prefix and Android 5.2 (Chromium WebView) no prefix
• HTML Imports - Chrome 49, Opera 40, Android 4.4 with -webkit prefix, and Chrome 49, Opera 40, Android 4.4 with prefix %code% e Android 5.2 (Chromium WebView) without a prefix, Chrome 52 for Android

  

Note: This response is under construction.

In this article by DevMedia says:

  

According to the W3C specification, the Web Components consist   in "a set of five technologies: Templates, Shadow DOM, Custom   Elements, HTML Imports and Decorators ". Since the latter, different   of the others, still does not have a specification and has been quite   omitted by the community.

     

• Templates : Describes a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments   with identical content.

  
• Shadow Dom : describes a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other.   others within a document, thus allowing better encapsulation   functional within the DOM.

  
• Custom Elements : Describes the method to allow the author to define and use new DOM element types in a document.
    
• HTML Import : These are a way to include and reuse HTML documents in other HTML documents.

  

• Decorators : Apply templates based on CSS and JavaScript selectors to create visual and behavioral changes. The element    content inserted inside the template will be replaced with the content   of the decorating element.

  

The explanation of each of these elements is partly based on the article Web Components from Beto Muniz's blog.

Custom Elements

  

Custom Elements makes explicit the creation of differentiated elements, transforming the developer into a "web   maker ", that is, the developer is no longer limited to just    <button> , <div> , etc. Being able to create your own HTML elements   with unique structure, behavior and style.

For example, the structure of Carousel of Twitter Bootstrap :

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
    </div>
    <div class="item">
      <img src="..." alt="...">
    </div>
    ...
  </div>

  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

  

Imagine being able to encapsulate all this divnation or listnation together   with logic and style of Carousel and only publicly view this:

<my-carousel>
  <img src="images/x.jpg" alt="imagem X">
  <img src="images/y.jpg" alt="imagem Y">
  <img src="images/z.jpg" alt="imagem Z">
  ...
</my-carousel>

And notice mostly that we now have a custom element called: <my-carousel> .

Templates

Where the reusable code is defined, it starts with the <template> tag. It's just a declarative element to create a new template.

<template id="exemploTemplate">
  <div class="avatar">
    <img src="" class="imagemAvatar">
    <div class="nomeAvatar"></div>
  </div>
</template>

JavaScript:

var template = document.querySelector('#exemploTemplate');
template.querySelector('.imagemAvatar').src = 'imagemPerfil.jpg';
template.querySelector('.nomeAvatar').textContent = 'Nome'; 
document.body.appendChild(template);

This is just JavaScript, there are no new APIs or anything confusing.

Shadow DOM

  

It was designed to allow some independence and isolation from the   component, so that it is ensured that nothing external   and out of the blueprint of what was intended for the element to be modified.   For example the tag <video> :

<video width ="320" height="240" controls>
    #shadow-root (user-agent)
    <div>
        <div>
            <div>
                <input type="button">
                <input type="range" step="any" max="12.612">
                    <div style="display: none;">0:00</div>
                    <div>0:12</div>
                <input type="button">
                <input type="range" step="any" max="1">
                <input type="button" style="display: none;">
                <input type="button">
            </div>
        </div>
    </div>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    "Your browser does not support the video tag"
</video>

  

It has a #shadow-root statement, and it is from this   declaration that the "confinement" of the behavior of its element is   respected by the browser and its application, not to mention also that the   from this statement a DOM subtree is created, which also   avoids assimilating this pattern to the use of <iframe> . If it was not   possible to create this isolation, all controls for example the tag    <video> would be affected if a CSS rule was created or   global handling via Javascript for element div .

HTML Imports

<link rel="import" href="customelements/my-carousel.html">

And so, we can declare the same element anywhere and anytime within the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="import" href="customelements/my-carousel.html">
</head>
<body>

    <my-carousel>
      <img src="images/x.jpg" alt="imagem X">
      <img src="images/y.jpg" alt="imagem Y">
    </my-carousel>

    <my-carousel>
      <img src="images/a.jpg" alt="imagem A">
      <img src="images/b.jpg" alt="imagem B">
    </my-carousel>

</body>

Decorators

Decorators are part of the Web Components, but actually have no specification. Apparently they may look something like this, with the intention of improving or replacing the presentation of an existing element.

<decorator id="detalhe">
  <template>
    <a id="resumo">
      &blacktriangledown;
      <content select="resumo"></content>
    </a>
    <content></content>
  </template>
</decorator>

References:

• Web Components in Practice
• Web Components