A quick video introduction into Shadow-DOM, the game-changing DOM-subtree-technology

Awesome talk by Eric Bidelman (of the Chrome team): Shadow-DOM was often heard in 2013 and seem to exist for 3 years now (there are blog posts from early 2011 about this), but I never got really into contact with the technology, until somebody sent me this excellent video.

What is ShadowDOM ?

I’m not 100% sure about this technology, but the basic idea is this: We have our regular document-object-model (DOM), the HTML-tree. This tree of HTML tags can be manipulated in layout and behaviour via CSS and JS (and some other technologies, but let’s skip that here). Now imagine that we introduce a custom HTML tag called datepicker. And now the surprise: This HTML tag – which is displayed as a single tag in our DOM – is basically an encapsulated HTML document or HTML template, with own encapsulated CSS. The HTML document has its own DOM, its own CSS. To get an idea how all this stuff works and where the limits are have a look into this conference talk clip.