Веб-компоненты Polyfill не работают

Я пытаюсь заполнить веб-компоненты, как описано на https://www.webcomponents.org/polyfills/ так как я хотел, чтобы мое приложение-пример работало как на Chrome, так и на Firefox. Однако я получаю ReferenceError: customElements не определена ошибка в Firefox. Смотрите мой код ниже на index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sample</title>
    <link rel="stylesheet" href="css/site.css">
    <!-- Components -->
    <link rel="import" href="components/global/site-navigation.html">
</head>

<body>
    <script>
        (function () {
            if ('registerElement' in document
                && 'import' in document.createElement('link')
                && 'content' in document.createElement('template')) {
                // platform is good!
            } else {
                // polyfill the platform!
                var e = document.createElement('script');
                e.src = 'js/webcomponents.js';
                document.body.appendChild(e);
            }
        })();
    </script>
    <site-navigation></site-navigation>
</body>    
</html>

Что мне не хватает?

PS: все отлично работает в Chrome (с / без polyfill)

Источник

1 ответ

Решение

Вы используете старую версию поликомпликации webcomponentsjs, которая реализует пользовательские элементы v0 document.registerElement() вместо v1 customElements.define(),

Вы должны использовать новую версию 1.0 на github.

Просто загрузите скрипт webomponents-lite.js в <head> часть вашей страницы:

<script src="webcomponents-lite.js"></script>

Обновление: теперь версия 2 polyfill была выпущена. HTML Imports polyfill больше не поставляется, но его можно использовать отдельно, или вы все равно можете скачать ветку v1.

Источник
Другие вопросы по тегам