如何理解shadow dom, shadow tree,virtual dom

Question

如何理解的shadow dom？
是否只要是 web component 中定义的模板，就可以认为是 shadow dom 呢？
shadow dom 和 virtual dom 是同种含义吗？如果是不同的，又有什么区别？

Answer 1

<video src="foo.mp4" type="text/mp4" />

浏览器会渲染一个完整的播放器，播放按钮，进度条还有音量控制这些元素就是在shadow DOM内，它们不在tag内显示声明，但确实存在。

shadow DOM在web component内使用shadowRoot标记的，所以web Component不一定就是shadow DOM。http://webcomponents.org/articles/introduction-to-shadow-dom/

Virtual DOM不是DOM，只是DOM的一种（经过优化的）映射，JS代码操作Virtual DOM获得更好的渲染性能，因为直接操作DOM额外开销太大。

Answer 2

• Shadow DOM 简介
• 理解 Virtual DOM