What are Web Components?

Ramón Saquete

Written by Ramón Saquete

If you haven’t heard of them until now, keep reading, because the next tag you don’t recognise in the HTML will probably be a web component, because they allow developers to make up new HTML tags, with their own features and client-side code encapsulation, something which wasn’t possible up until now.

What web components consist of

The web components specifications began their development a couple of years ago, although some of the technologies they use started even earlier. They are considered to be a revolution in the industry of web development, with regard to reuse and client-side code encapsulation, because they allow us to encapsulate HTML, CSS and JavaScript code, in a way that it can’t be affected by the code of the page containing it. If we want to modify the style of a web component from outside its code, we can do it, but we’d have to do it on purpose.

They are easily to recognise because they must always have a hyphenated name (see the following example of a web component that allows us to add Google’s maps):

<google-map latitude="37.77493" longitude="-122.41942"></google-map>

As you can see, the developer can add the properties they want to the web component.

It is also possible to extend the features of existing elements. For example, the following component extends the features of a text field inside a form, allowing its validation:

<input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">

Web components extending native elements can be recognised by their “is” attribute, which should carry the name of the web component with its hyphen as its value.

What are they used for?

We’ve already seen that we can use web components to encapsulate the use of external JavaScript APIs, such as Google Maps, and to extend the behaviour of native elements.

Another use we can get out of them is to add semantic tagging or even content. For example, let’s imagine we have the following web component for the products of an online shop:

<product-store price="99" priceBefore="88" href="/product-link.html">
<div class="name">Product name</div>
<div class="description">Product description</divglt;
</product-store>

This web component could generate the following code in the user’s browser, for each product we add in this way:

<article itemscope="" itemtype="http://schema.org/Product">
<h3><a itemprop="url" href="/product-link.html"><span itemprop="name">Product name</span></a></h3>
<p itemprop="description">Product description</p>
<p itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<del>Before €88</del><ins>Now €<span itemprop="price">99</span></ins>
</p>
</article>

Even with just one product we can see that the web component requires less HTML, because less code is repeated and it adds the necessary microdata for Google to recognise it as a product.

The most common application of web components is to make use of JavaScript libraries easier, in order to make tabs, slides, carousels, responsive images, or any other type of feature requiring the usage of a specific HTML format, in conjunction with a JavaScript library and CSS code.

If you want to find out about other application yourselves, the following link includes a list of rather useful components.

How are they used?

To be able to begin using a web component, we only need to import it from inside the <head> tag of the page that is going to use it, through the following tag:

<link rel="import" href="component-example.html">

Inside this piece of HTML we will have all the HTML, JavaScript and CSS code it needs to work.

Frameworks and support

Currently, not all browsers support all the necessary technologies for it to work. However, there are three frameworks, which allow us to make them interoperable between all browsers using polyfills, while making their development easier at the same time. These frameworks are:

  • Polymer: Developed by Google, it recently launched the 1.0. version. This framework is already being used by the company to develop its service. In IE it works from the version 11 onwards, because it is focussed on providing support to the latest browsers for maximum performance.
  • X-Tag: Developed by Mozilla. In IE it works from version 9 onwards.
  • Bosonic: same as the previous one, it also provides support for older browser versions, more specifically, in IE it works from version 9 onwards.

Technologies used

Web components are not a technology in and of itself, they are based on the combined use of four technologies that can be used independently, which I detail below:

  • Custom Elements: allows us to define new types of elements.
  • HTML Imports: allows us to import HTML files inside other HTML files, to be reused through the link tag we’ve seen earlier.
  • Templates: templates allow us to create HTML chunks, which can be reapplied as many times as necessary.
  • Shadow DOM: this spec is the most important one, as well as the most difficult to understand. This is the technology allowing us to encapsulate HTML chunks, isolating CSS and JavaScript code with it, so that the code of the page remains unaffected. It is said that this DOM tree is hidden in the shadows (shady DOM) inside a document that has light DOM. The browser will generate light DOM mixed with shady DOM in whichever way we defined it. This is done by establishing a correspondence between the shadow host (light element of the document tree that is going to contain the shadow tree) and the shadow root (root element of the shadow tree). Inside the shadow tree we establish where each element of the light tree is going to appear with a special tag, “content”. The browser-generated DOM, where both light and shadow DOM are mixed is called composed DOM or rendered DOM.

It is likely that this short explanation doesn’t make it clear how this composition is created, so if you are interested, I recommend you to take a look at the following W3C chart and this interactive example:

Shadow DOM composition

Shadow DOM render

And so, to create a web component we enter Shadow DOM inside a Template of a Custom Element, which is imported to a page. A task that is not at all easy, if we don’t use the frameworks I mentioned in the previous point, due to the implementation differences in each browser.

Indexability

Web components need to run JavaScript in almost all of the technologies they use, but apparently Google is improving indexing via JavaScript execution, allowing web components to get indexed. Although, as with any new technology, it is always likely we will run into issues. Have you experimented with web components yet?

Ramón Saquete
Autor: Ramón Saquete
Web developer at Human Level Communications online marketing agency. He's an expert in WPO, PHP development and MySQL databases.

Leave a comment

Your email address will not be published. Required fields are marked *