What's next in HTML5

0800 156 0777

What's next in HTML5

Having created and run the Highlander courses for the last 3 years, I can see some really useful things on the horizon. HTML5 has been a great step up from HTML4, and there has been, and continues to be, great things created with HTML5, but more is coming. So what is next in HTML5? Well I am talking about Web Components. You can read the spec here…

http://www.w3.org/TR/2013/WD-components-intro-20130606/

This actually comprises of…

The Shadow DOM Custom elements Templates HTML Imports

These are all very new, but you can already use them today. However you must use an up-to-date browser. There is already an excellent polyfill called polymerjs:

http://www.polymer-project.org

 This library is built on top of Web Components and is designed to leverage the above features. It also gives you a set of comprehensive UI and utility components for building web applications. Web components gives you the ability to create your own, custom, tags and components. You can apply your own html, css, and javascript as before, but they become re-usable widgets that can be used multiple times within a page. More importantly they are design to be walled-off from the rest of the page (encapsulated) so you do not have to worry about tripping over any other code. Let me give you a brief run-down of the above topics. The Shadow DOM

This allows the encapsulation of  a DOM tree, along with css and javascript. You will be able to create your own code that is parsed separately from the rest of the page. A good example of this are the new input types date and calendar in HTML5. For example, here is a simple html5 tag…

<input type="date">

We know this gives us a calendar.

 

Date form tag

Date form tag

 

 

Looking at this we assume it is made of divs, etc, i.e. standard html tags. But when we look at the source code, all we see is the <input type="date"> tag. So what is going on? Well, within Chrome, if you go to the Developer Tools and go to the options (the little cog in the bottom right-hand corner) and go to General. there is an option called Show shadow DOM.

 

shadow dom option

shadow dom option

 

Once you have done this, now look at the source code…

 

with shadow dom enabled

with shadow dom enabled

 

Bang! Now you see a whole lot more. This html/css/javascript is walled off from the rest of the page, but functions very well by itself, embedded within your page. This is what we are talking about, the ability to create your own elements like this.

Custom elements

The ability to create your own, custom, DOM elements, e.g. <alex></alex>

Templates

Declaring inert DOM subtrees in HTML (document fragments), manipulating them and instantiating them.

HTML Imports

Re-using HTML documents within other HTML documents

There is so much here that it will fundamentally change the way you can design web pages. Also, using polymerjs gives the ability to bind data to properties within your html templates. This gives you some fantastic tools to create some really great pages. Another library that is worth looking that…  x-tag =  a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers. Exciting times are ahead, and in future posts I will be exploring these new techniques and the new abilities that they give us.