Polymer 1.0 в Firefox ReferenceError: Полимер не определен

Здравствуйте, у меня есть рабочая веб-страница Polymer 1.0 на Chrome и Opera. Теперь мне нужна страница для запуска в Firefox и Safari. У меня есть следующий тест:

<!DOCTYPE html>
<html>
    <head>
        <?php use Cake\Routing\Router; ?>
        <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
        <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">

        <dom-module id="test-element">
            <template >
                <h1>It works</h1>
            </template>
            <script>
                Polymer({
                    is: "test-element"
                });
            </script>
        </dom-module>
    </head>
    <body unresolved>
        <test-element></test-element>
    </body>
</html>

Я пытался изменить

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>

в

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>

или же

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?>

Я думал, что Polyfills веб-компонентов позаботятся об импорте HTML. Но это не работает. В Firefox я получаю следующую ошибку:

ReferenceError: Polymer is not defined

Я не смог протестировать его с Safari, но ожидаю аналогичного результата.

Я делаю что-то не так? как я могу сделать эту работу?

Также я попытался удалить веб-компоненты и запустить обновление Bower, чтобы установить их снова.

благодарю вас

РЕДАКТИРОВАТЬ:

У меня есть два файла. index.html:

<!DOCTYPE html>
<html>
    <head>
        <?php use Cake\Routing\Router; ?>
        <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
        <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
        <?=  $this->element('Polymer/test-element');?>
    </head>
    <body unresolved>
        <test-element></test-element>
    </body>
</html>

и файл элемента:

<dom-module id="test-element">
    <template >
        <h1>It works</h1>
    </template>
    <script>
        addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element"
            });
        });
    </script>
</dom-module>

Это отлично работает. Моя проблема, если я удаляю addEventListener. Firefox получает ту же ошибку:

ReferenceError: Polymer is not defined

Как будто Polyfills не были загружены вовремя. Есть ли способ это исправить? Является ли добавление addEventListener правильным способом сделать это?

Спасибо

Ответы на вопрос(1)

Ваш ответ на вопрос