How to fix web components not showing in Microsoft Edge

问题

I'm trying out lit-element and everything was going well with browsers such as Chrome and Firefox. But I faced a problem when I tried Microsoft Edge and IE11. The web component that shows in Chrome and Firefox doesn't show in Microsoft Edge and IE11.

I did some search on the internet and also read the documentation of Lit Element and it says I will need to load the polyfills in order for the web components to work in Edge and IE11, however I have encountered problems while trying to do so.

The code that I'm using to load my polyfills are as follow,

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js"></script>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-loader.js"></script>

<script type="module">
  window.WebComponents = window.WebComponents || {
    waitFor(cb){ addEventListener('WebComponentReady', cb) }
  }
  WebComponents.waitFor(async () => {
    import('mypath/somecomponent.js');
  });
</script>

I used the developer tools in Microsoft Edge and the following are showing.

SCRIPT5022: SCRIPT5022: Syntax error

When i click into the debugger it also shows the following message

Could not locate https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/ [synthetic:util/global] specified in source map https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js.map.

Any help will be greatly appreciated!!

回答1:

You need either webcomponents-bundle.js or webcomponents-loader.js but not both. Also, since you are targetting IE11, you will need module bundler like Webpack to use features like async functions, ES imports.

To solve your problem without using async and imports, all you need is:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js"></script>
<script src="mypath/somecomponent.js"></script>

Add these scripts to your HTML page and it should work. Again, if you wish to use async and imports then you will need appropriate polyfills and bundler to package the code.

回答2:

Read what @Harshal said and:

Don't use WebComponentReady it has been deprecated.

Instead use customElements.whenDefined.

You will also need a Promise polyfill.

You do not need a bundler, like webpack but you will need to transpile your ES6 code into ES5 code using something like Babel. This will convert things that can not be polyfilled into code that will work in IE11 and can convert your export code into plain old IIFE style code.

来源：https://stackoverflow.com/questions/56334637/how-to-fix-web-components-not-showing-in-microsoft-edge

标签

javascript

web-component

lit-element