Ken*_*hua 7 javascript web-component polyfills lit-element
我正在探索什么是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组件是在app.js中定义的HTMLElement,其中todo-view是在todo-view.js中定义的LitElement。
在Microsoft Edge中,没有收到任何错误消息,但未显示todo-view组件。任何帮助将非常感激!
这在当前版本的 Edge 中有效,但如果我加载旧版本,我可以看到你的问题(尽管我得到了首先升级的提示)。这个版本的 Edge非常小众——它现在的使用量比 IE11 还少。
然而,你的问题根本不是polyfills的错误——它们加载得很好。问题是您使用了错误的 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";
Run Code Online (Sandbox Code Playgroud)