Written by Ramón Saquete
Table of contents
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
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?
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.
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">
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.
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.
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:
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.