What are Web Components?

Question

What are web components and how to use this technology ?

I would like to understand a little more about this technology and visualize an example with its use.

Answer 1

The Web Components consist of several separate technologies, you can understand a Web Component as being 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 importing/injecting a widget (which in this case is an html snippet) into an existing HTML page. Web Components are not complete yet, so modern browsers support some of the technologies and another part is still under development.

Web Components consists of 4 technologies:

• Custom Elements - Only supported 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 prefix -webkit and Android 5.2 (Chromium Webview) without prefix
• HTML Imports - Chrome 49, Opera 40, Android 4.4 with prefix -webkit and Android 5.2 (Chromium Webview) without prefix, Chrome 52 for Android

Note: this answer is under construction

Answer 2

In that article of Devmedia says:

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

• Templates: describes a method to declare inert DOM subtrees in HTML and manipulate them to instantiate document fragments with similar content.

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

• Custom Elements: describes the method to allow the author to define and use new types of DOM elements in a document.

• HTML Import: are a way to include and reuse HTML documents in other HTML documents.

• Decorators: Apply CSS and Javascript selector-based templates to create visual and behavioral changes. The element content inserted inside the template will be replaced with the contents of the decoration element.

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

Custom Elements

Custom Elements makes it possible in a very explicit way to create differentiated elements, transforming the developer into a "web maker", i.e., the developer ceases to be limited to only <button>, <div>, etc. You can create your own HTML elements with unique structure, behavior and style.

For example, the structure of Carousel 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 that divnation or listnation along with logic and style of Carousel and display only that publicly:

<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 mainly that we now have a custom element called: <my-carousel>.

Templates

Where reusable code is defined, it starts with the tag <template>. It is only 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 something confusing.

Shadow DOM

It was designed to allow for a certain independence and isolation of component, so that it is ensured that nothing externally and out of the plans of what was thought for the element is 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>

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

HTML Imports

Importing dependencies in our language of choice comes in many shapes and sizes. For CSS, we have @import, For Javascript in ES6 modules we have import {Module} from './somewhere';, And finally, HTML. We can import HTML components at the top of our document to define which ones we need to use in our application:

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

And so, we can declare the same element anywhere and at any time 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 Web Components, but they don’t actually have 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