The amazing Shadow DOM

Today I watched a talk by Angelina Fabbro at JSConf EU 2012 about the Shadow DOM. Sadly this isn't supported by any browsers yet (except Chrome Canary) but I think this is something that will be available quite soon in the major browsers because it is something we developers really want and I guess it will get really popular when the word gets around. The video lasts for almost half an hour, but its really something you should watch!

The shadow DOM isn't something completely new. Video elements, form sliders, number inputs, etc. all use a shadow DOM. If you inspect a video element in a page, the only thing you see is the element with some parameters like the URL of the video. But there is this slider, play button, fullscreen button, etc. All these elements are in the shadow DOM of the video element.

With the shadow DOM visible in the page source (Chrome Canary > Developer Tools > Options > Experiments > "show shadow DOM") you will see these elements (fast forward the video to 05:33 to see it work).

In short: the new "template" and "element" elements enable you to replace the rendering of elements in a page with something else and re-use the content of the original element in these (external) templates.

If I understood correctly... it's new for me too :) Now go watch this video!

TLDR

W3C Status

The official W3C working Draft by Dimitri Glazkov: http://www.w3.org/TR/2012/WD-shadow-dom-20121016/. Glazkov also wrote an excellent article about shadow DOM, explaining what it is and what you can do with it. Since he's much better at it then I am I suggest you to read his article: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/.

What now?

Start playing around with the Web Components Polyfill (made by Glazkov too) and show people how awesome it is. Spread the word and make the browser vendors implement this awesome new functionality!

Update 13-11-2012


Also read this excellent article by Roman Liutikov: http://blog.romanliutikov.com/coding/discover-the-dark-side-with-shadow-dom/