How to use polyfills in Microsoft Edge 44 or earlier?

Question

I'm exploring what are polyfills and followed a youtube video (https://www.youtube.com/watch?v=eSdAC8d5_Nw&t=379s) on using polyfills to show web components in unsupported browsers, specifically I'm targeting Microsoft Edge.

I have tried HTMLElements as the youtube video is showing and everything is working fine, however when I tried to do the same with LitElement, the component will not show in browsers even like Chrome.

I have created a Plunker file with the files that I'm currently working with at this link (http://plnkr.co/edit/w4np7dbm3N9yk1DFWA3W) Index.html is the webpage that I am trying to display all the components that I have created. The compoenents that I have are <web-component></web-component> and <todo-view></todo-view>.

The web-component is a HTMLElement defined in app.js whereare todo-view is a LitElement defined in todo-view.js.

In Microsoft Edge, I'm not getting any error messages but the todo-view component is not showing. Any help would be much appreciated!

Answer 1

This works in current versions of Edge, but I can see your problem if I load up an old version (though I get a nag to upgrade first). This version of Edge is extremely niche - it has less use than IE11 now.

However, your issue isn't a bug with the polyfills at all - they're loading fine. The problem is that you're using the wrong path for Lit.

If I switch that to the correct one it works fine in Edge 44:

Here's a fixed fork of your 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";