There has been a lot of brouhaha in the software development community about Web Components and the huge potential applications with the modern web. At NaviNet, we have kept a very close eye on Web Components as we continuously evolve our user interface (UI). Both our UI and Research team have had hands on experience with Web Components and in particular the Polymer library , so we would like to share some of our experiences. In this first post of our two-part series on Web Components, we’ll cover:
- What are Web Components?
- What technologies make up Web Components?
What are Web Components?
Web Components are a collection of new web standards/technologies that will allow us (developers) to create reusable UI components. The proposed Web Component standards are still largely in draft form, but this doesn't mean they can't be used. Google is a large driving force behind these technologies and Chrome even supports all of the standards. Besides Google, adoption of Web Components by other browsers is at different levels of maturity. Check out WebComponents.org to see a matrix at the current adoption levels. The expectation is that most browsers will implement Custom Elements, HTML Imports, Templates and Shadow DOM soon but Web Components are a future tech so it’s worth some serious thought if you have a 'generous' browser support policy.
One of the big selling points of Web Components is the ability to build re-usable components. The Polymer library of components shows which can all be used for many different purposes. At NaviNet, this has opened the door to embeddable widgets within our platform that has aided and improved integrations with our partners. When making reusable Web Components, there are four new technologies used:
- HTML Templates
- Custom Elements
- Shadow DOM
- HTML Imports
1. HTML Templates
Templates aren't a new concept and a number of solutions that already exist including Handlebars.js and jsRender. Many of these solutions use `<script>` tags to store their templates which isn't ideal. However, Web Components introduces the new `<template>` tag which can be used to store an HTML template. A `<template>` is never rendered on the screen so the user won't see it unless we use the template to populate an item. Let’s take a quick look at how to use HTML Templates. The code below defines a simple template.
We can then use our template and inject its content into a particular element:
Couple of things to note in regards to HTML templates: the `<template>` element does not provide any data binding out of the box and any `<script>`, `<img>` or `<style>` elements will be executed/fetched/applied once the template has been appended.
2. Custom Elements
The ability to define a custom element allows us to create any element we need that the standard HTML elements don't provide. This should lead to much nicer mark ups as we aren't relying on `<div>` elements to give us the structure that we need (No more div soup!). With custom elements we can:
- Create new elements that meet our needs
- Extend existing element functionality
- Group similar functionality under the same element
When creating a Custom Element the name you give to that element must have at least one hyphen (-) for it to be valid.
When extending built in HTML elements use the `is` attribute to let the browser know you want to use an extended item.
Above are some very basic examples but what about combining a custom element with the template from before? To allow us to do this there are some life cycle callbacks we can hook into.
- `createdCallback` - triggered when an instance of the element is created
- `attachedCallback` - triggered when an instance of the element is inserted into the document
- `detachedCallback` - triggered when an instance of the element is removed from the document
So we can hook into the `createdCallback` and insert our template from the example before:
3. Shadow DOM
There are no shadows without light and the light DOM is considered any DOM element that is in the original page DOM. Shadow and light can interact through `<content>` tags. These allow the contents of the shadow host to be inserted into the shadow DOM:
Let's try a more complicated example using everything we've learned so far:
4. HTML Imports
This looks similar to a style sheet import except for `rel="import"`. Any `<script>` tags in the import are executed as if they have the `defer` attribute. An HTML import may also contain more HTML imports as well so that components can be composed of other components. Let's continue using the example from before except extract it out to its own HTML file. This is my-element.html.
It is important to note that the `importDoc` variable, is set to the current executing scripts `document` which allows us to search for the template. If we just used the `document` variable we would still be accessing the original pages document and therefore would not find the template. To consume our component would be something like:
The Future is Now
Ok maybe not right now, but we are close. A lot of work has been done on web components including polyfills so everyone can make use of this technology now. These technologies are certainly a step in the right direction, even if they do not yet fill all the gaps. A number of libraries have already tried to fill some of the short comings including Polymer and x-tags but that’s for another post.
Join us for Part 2 when we'll discuss the hands on experience we have had with Polymer for work during our recent Customer Forum and we'll talk about what we enjoyed and some of the challenges we found.
*Web Component logos curtesy of WebComponents.org.
Like this post? Want to read more like it?