在一些流行的浏览器不支持的情况下，angular2 将如何使用 shadow dom？答案

【问题标题】：How angular2 is going to use shadow dom while it's not supported in some popular browsers?在一些流行的浏览器不支持的情况下，angular2 将如何使用 shadow dom？
【发布时间】：2015-06-03 22:59:22
【问题描述】：

来自documentations：

当一个组件被实例化时，Angular

creates a shadow DOM for the component.
loads the selected template into the shadow DOM.
creates a child Injector which is configured with the appInjector for the Component.

但是，据我所知，IE、Safari甚至在Firefox的默认配置中还不支持shadow DOM ！
考虑到shadow DOM不是一个可以通过js库或其他东西轻松添加到浏览器的功能，浏览器对angular2的支持如何？

PS：请原谅我调用 IE 和 Safari（特别是 IE）流行的浏览器！

【问题讨论】：

标签： web-component shadow-dom angular

【解决方案1】：

Angular 2 有两种 Shadow DOM 模式：模拟和原生。换句话说，不支持 Shadow DOM 的浏览器将获得有效但速度较慢的 polyfill。

Discussion & Source code

【讨论】：

谢谢。我不知道EmulatedShadowDomStrategy 的任何细节，但我仍然觉得shadow DOM 不是一个可以在没有浏览器支持的情况下添加或“模拟”的功能！
Polymer 将是在所有现代浏览器中填充 Shadow DOM 的库的一个很好的例子。本质上，polyfill 看起来像这样：(function() { if ('createShadowRoot' in HTMLElement.prototype) { return; } HTMLElement.prototype.createShadowRoot = function() { return this.shadowRoot = this; }; })();

【解决方案2】：

Angular 2 和 Polymer 都使用 Polyfill 来模拟 Shadow DOM。聚合物称之为Shady DOM。

请注意，这些 polyfill 仅在最新版本的浏览器中受支持，例如 IE 11。

【讨论】：