Как исправить веб-компоненты, не отображаемые в Microsoft Edge - PullRequest
Новая
       17

Как исправить веб-компоненты, не отображаемые в Microsoft Edge

1 голос
/ 28 мая 2019

Я пробовал lit-element, и все шло хорошо с такими браузерами, как Chrome и Firefox. Но я столкнулся с проблемой, когда попробовал Microsoft Edge и IE11. Веб-компонент, отображаемый в Chrome и Firefox, не отображается в Microsoft Edge и IE11.

Я выполнил поиск в Интернете, а также прочитал документацию по Lit Element, в которой говорится, что мне нужно будет загрузить полифиллы, чтобы веб-компоненты работали в Edge и IE11, однако при попытке сделать это возникли проблемы. поэтому.

Код, который я использую для загрузки своих полифилов, выглядит следующим образом: 

<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>

Я использовал инструменты разработчика в Microsoft Edge, и следующее показывает:

SCRIPT5022: SCRIPT5022: Syntax error

Когда я щелкаю в отладчике, он также показывает следующее сообщение

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.

Любая помощь будет принята с благодарностью !!

Ответы [ 2 ]

1 голос
/ 29 мая 2019

Вам нужно либо webcomponents-bundle.js, либо webcomponents-loader.js, но не оба. Кроме того, поскольку вы нацеливаетесь на IE11, вам понадобится пакетный модуль, например, Webpack, чтобы использовать такие функции, как async functions, ES imports.

Чтобы решить вашу проблему без использования асинхронного режима и импорта, все что вам нужно: 

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

Добавьте эти скрипты на свою HTML-страницу, и она должна работать. Опять же, если вы хотите использовать асинхронность и импорт, вам понадобятся соответствующие полифилы и пакет для упаковки кода.

0 голосов
/ 30 мая 2019

Прочитайте, что сказал @Harshal и:

Не используйте WebComponentReady, оно устарело.

Вместо этого используйте customElements.whenDefined.

Вам также понадобится Promise polyfill.

Вам не нужен упаковщик, такой как веб-пакет, но вам нужно будет перенести код ES6 в код ES5, используя что-то вроде Babel .Это преобразует вещи, которые невозможно заполнить, в код, который будет работать в IE11, и может преобразовать ваш код export в обычный старый код стиля IIFE.

...