About today

Web Components

· by Otto Giron · Read in about 3 min · (495 Words)
CSS HTML javascript

Web components is a set of standards which brings technologies we were used to, but normally provided by frameworks or libraries such angular, ember, knockout (among others). Web Components standard natively supports in the web browser custom HTML elements, HTML imports and templates, also “shadow DOM” which extends the current DOM specification providing boundaries and better encapsulation between DOM trees.

Custom Elements

It let’s the author to define custom DOM Elements. Imagine that you have an application for managing a todo list, with custom elements we might come with something like this:

<todo-list>
    <todo-item value="Learn Haskell></todo-item>
    <todo-item value="Write a blog post></todo-item>
</todo-list>

Benefits

The end of the div soup ?

One of the problems of the way we develop web interfaces using the current HTML standard is that HTML tags don’t cover all the visual and functional requirements we need, so the approach we’ve been using in order to create custom visual components and behavior is a mix of what we already have (divs, spans, inputs etc) and some JavaScript and CSS.

alt div soup

What you see above it’s what some call “the DiV soup” a bunch of nested DIVS which don’t say much about the real purpose of the HTML we are using, this might lead to problems in code maintenance for developers and web accessibility, it also evidences a lack of semantics.

Custom elements will let you define an HTML structure which will represent and transmit what you are actually building.

HTML Imports

HTML imports allows you to reuse your web components accross different pages.

Example

<head>
  <link rel="import" href="/path/to/imports/myCustomElement.html">
</head>
<body>
  <myCustomElement></myCustomElement>
</body>

Templates

We are familiar with existing templating libraries such handlebars, jade, mustache etc. Template engines are important for keeping our view rendering semantic separated from our logic. The use of template engines is already accepted as a good practice when developing web interfaces, so it’s seems natural to have a built in (native) template engine in our browser.

Example

First we need to define a template element:

<template id="template">
  <style>
    ...
  </style>
  <div>
   <h1>Hello Templates</h1>
  </div>
</template>

Then we can actually use template html and append it to the dom.

<script>
  var template = document.querySelector('#template');
  var clone = document.importNode(template.content, true);
  var host = document.querySelector('body');
  host.appendChild(clone);
</script>

Templates don’t support data binding which is a concept normally tied to libraries and frameworks. There are frameworks supporting this kind of abstractions and extra functionality, check Polymer.

Shadow DOM

Shadow DOM provides a way of scoping HTML and CSS. One common issue Shadow DOM address is when we have CSS rules with common names, now we have a way for encapsulate styles of different components so they don’t mess with each other.

Conclusion

Web Components is a new exciting standard supported in modern web browsers bringing a solution to problems we have tried to solve in different ways. The standard provides a good foundation that eventually might be used by the different frameworks we already love and use, and by the frameworks to come.

Comments