如何在Microsoft Edge中使用Polyfill？

Question

我正在探索什么是polyfill，并在使用YouTube影片（https://www.youtube.com/watch?v=eSdAC8d5_Nw&t=379s）之后在不支持的浏览器中显示了web组件，特别是针对Microsoft Edge。

我已经尝试了HTMLElements，因为youtube视频正在显示，并且一切正常，但是当我尝试对LitElement进行同样操作时，即使在Chrome等浏览器中，该组件也不会显示。

我已使用此链接（http://plnkr.co/edit/w4np7dbm3N9yk1DFWA3W）上当前正在使用的文件创建了一个Plunker文件。Index.html是我试图显示已创建的所有组件的网页。我拥有的成分是<web-component></web-component>和<todo-view></todo-view>。

Web组件是在app.js中定义的HTMLElement，而todo-view是在todo-view.js中定义的LitElement。

在Microsoft Edge中，我没有收到任何错误消息，但未显示todo-view组件。任何帮助将不胜感激！

Answer 1

这适用于当前版本的 Edge，但如果我加载旧版本，我可以看到您的问题（尽管我先升级时遇到麻烦）。这个版本的 Edge 非常小众 - 现在它的使用量比 IE11 少。

但是，您的问题根本不是 polyfill 的错误 - 它们加载良好。问题是你使用了错误的 Lit 路径。

如果我将其切换为正确的，它在 Edge 44 中工作正常：

这是您的 Plunk 的一个固定分支：http://plnkr.co/edit/r5PNsGakMZK4JDMn

// todo-view.js line 1:
-- import { LitElement, html } from "https://unpkg.com/@polymer/lit-element/lit-element.js?module"; 
++ import { LitElement, html } from "https://unpkg.com/lit-element/lit-element.js?module";