Angular2 异常：TypeError el.createShadowRoot 不是函数（Safari/Edge）答案

【问题标题】：Angular2 Exception: TypeError el.createShadowRoot is not a function (Safari/Edge)Angular2 异常：TypeError el.createShadowRoot 不是函数（Safari/Edge）
【发布时间】：2016-04-21 20:31:14
【问题描述】：

我有一个在 Chrome 和 Firefox 中运行良好的 angular2 应用程序，但在 Safari 中我收到此错误：

TypeError el.createShadowRoot 不是函数

Edge 中也是如此：

对象不支持属性或方法“createShadowRoot” 在 BrowserDomAdapter.prototype.createShadowRoot (http://localhost:5000/lib/angular2/bundles/angular2.dev.js:22893:7)

来自 Edge 的更多信息：

是否缺少一些垫片或聚合物？

【问题讨论】：

你可以试试this link 更新 safari 中的实验标志
根据 MDN Element.createShadowRoot 在 IE 和 Safari 中都不受支持。除此之外，它已被弃用。
@EricMartinez 感谢您的参考。如何告诉 Angular2 不要使用 createShadowRoot？

标签： angular

【解决方案1】：

如果您在简单的 HTML 文件中遇到此问题，那么下面的代码行可能会有所帮助

element.attachShadow({mode: 'open'})

【讨论】：

【解决方案2】：

我最近遇到了同样的问题，在 Firefox 上遇到了这个错误 el.createShadowRoot is not a function

从文档中，我了解到 createShawdowRoot 已被弃用，取而代之的是 attachShadow() https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

查看我的 Angular 项目中所有组件的封装，其中一个组件脱颖而出，并使用 ViewEncapsulation.Native ，该组件也已被弃用，因此我按照建议将其替换为 ViewEncapsulation.ShadowDom，检查 https://angular.io/api/core/Component#encapsulation

这为我治愈了它。

所以我假设 Native 封装编译为 Firefox 不再支持的 createShawdowRoot。

【讨论】：

谢谢，这也是我申请中的问题。

【解决方案3】：

createShadowRoot() 仅应在您使用 ViewEncapsulation.Native 时调用。

要么使用ViewEncapsulation.Emulated，要么确保加载了polyfills（我不能指导你怎么做，因为我不使用TS工具链，只使用Dart）

【讨论】：

非常感谢！原来我在 VS Code 中使用 sn-ps 并且无意中使用了 ViewEncapsulation.Native
很好的答案，它是否记录在某个地方的角度文档中？或者我们应该使用哪个 polyfill？
我忘记了各种浏览器中的 Web 组件支持状态。去年，除了 Chrome 之外，还需要带有完整 shadow DOM（不是 shady DOM）的 web_components polyfill。 angular.io/docs/ts/latest/guide/browser-support.html 没有提及。我认为 native 官方只支持原生支持的浏览器，这是有道理的，因为 Angular 有自己的仿真，速度要快得多。缺点是它不允许根据浏览器支持在原生和模拟之间进行选择。
我已经添加了 polyfill，但仍然面临同样的问题，请参阅stackblitz.com/edit/angular-webcomponent-polyfill
查看我之前的评论。 ShadowDom 发生了重大变化。我认为您仍然不需要 polyfill，但您需要有关如何创建自定义元素的最新文档。