Shadow DOM vs Detached Elements

Question

So, I am hearing the phrase "shadow DOM" a lot now. Is that the same as a detached DOM element?

If I create a DOM element like this:

var $pizza = $('<aside>', {
   'class': 'pizza'
});

$pizza is detached. I can attach it using attach, append or html perhaps.

Is this functionally the same as the concept of shadow DOM, but with some other caveats? What are the differences?

Answer 1

The Shadow DOM spec has been implemented in Chrome very recently (25). Shadow DOM is a spec covered by a larger group of "HTML5" specs known as Web Components. Web Components essentially allow for development of encapsulated widgets without resorting to iframes. Shadow DOM is a big part of this. There is already a neat polyfill for this spec included among other similar polyfills in Google's brand new Polymer library. Have a look at http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ for some more detail on the subject. Note that the referenced article was written before the spec was implemented anywhere.

Addressing your question directly, detached elements and shadow DOM are not the same concepts.