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.
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>
The end of the 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 allows you to reuse your web components accross different pages.
<head> <link rel="import" href="/path/to/imports/myCustomElement.html"> </head> <body> <myCustomElement></myCustomElement> </body>
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.
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 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.
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.