javascript - 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

Shadow DOM 规范最近已在 Chrome 中实现 (25)。Shadow DOM 是由一大组称为 Web 组件的“HTML5”规范所涵盖的规范。Web 组件本质上允许在不借助 iframe 的情况下开发封装的小部件。Shadow DOM 是其中的重要组成部分。在 Google 全新的 Polymer 库中的其他类似 polyfill 中，已经有一个适用于该规范的简洁 polyfill。有关该主题的更多详细信息，请查看http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ 。请注意，引用的文章是在规范在任何地方实施之前编写的。

直接解决您的问题，分离元素和影子 DOM 不是同一个概念。