javascript - 如何在 Microsoft Edge 44 或更早版本中使用 polyfill？

Question

我正在探索什么是 polyfill，并观看了一段 youtube 视频 (https://www.youtube.com/watch?v=eSdAC8d5_Nw&t=379s)，介绍了使用 polyfill 在不受支持的浏览器中显示 Web 组件，特别是我的目标是 Microsoft Edge。

我在 youtube 视频显示时尝试了 HTMLElements，并且一切正常，但是当我尝试对 LitElement 执行相同操作时，该组件甚至不会在 Chrome 等浏览器中显示。

我创建了一个 Plunker 文件，其中包含我当前在此链接 (http://plnkr.co/edit/w4np7dbm3N9yk1DFWA3W) 上使用的文件。Index.html 是我试图显示我创建的所有组件的网页。我拥有的组件是<web-component></web-component>和 <todo-view></todo-view> .

web-component 是在 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";