Сделать элемент Polymer 3.0 обратно совместимым с IE11 и Firefox 56?
У меня есть компонент из полимера 3.0. В настоящее время из коробки поддерживается только версия Chrome 67.0.3396.99. И Firefox 61.0.1 выдает ошибку TypeError: window.customElements не определено.
Edge выдает следующую ошибку:
SCRIPT5007: SCRIPT5007: Unable to get property 'polyfillWrapFlushCallback' of undefined or null reference
settings.js (15,14). SCRIPT5131: SCRIPT5131: Function is not a constructor.
Документация по полимерам непонятна и не содержит пошагового руководства, которое работает без проблем. Может ли кто-нибудь предоставить проверенные и проверенные шаги, чтобы компоненты Polymer 3.0 работали в новейшем браузере, а также в старых браузерах, таких как IE11.
Ответы 3
Установите полифиллы:
npm install @webcomponents/webcomponentsjs
Затем загрузите webcomponents-loader.js, чтобы проверить и загрузить любые полифилы, которые нужны вашему браузеру. В вашем index.html перед любой ссылкой на веб-компоненты добавьте следующее:
<script src = "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
Надеюсь, это кому-то поможет!
Полифиллы (webcomponent-loader.js) не работают в firefox 45
Мне удалось запустить его, добавив webcomponents-loader.js, например:
<script src = "./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src = "./components/subscriber-modal.js" type = "module"></script>
Но теперь мне нужно найти способ преобразовать ES6 WebComponent в ES5, чтобы использовать
<script src = "./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
для запуска транспилированного компонента. Но просто использование babel дает ошибку, которая не определена. Так что попробую использовать browserify.
Обратите внимание, что вам нужно синхронно загружать ваш webcomponents-loader.js, поэтому убедитесь, что не используете async в вашем (в chrome он хорошо работает с async, но не работает). В первый раз я столкнулся с той же проблемой, и мой сценарий ниже:
<script src = "./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>
Вы используете полифил веб-компонентов?