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!
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/.
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!
Also read this excellent article by Roman Liutikov: http://blog.romanliutikov.com/coding/discover-the-dark-side-with-shadow-dom/