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'); ?>

to 

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

or

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

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

ReferenceError: Polymer is not defined

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

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

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

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

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

У меня есть два файла. индекс.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

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

Спасибо


web-component firefox polyfills polymer html-imports
person Alejandro    schedule 21.10.2015    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Попробуйте обернуть свой javascript в addEventListener('WebComponentsReady', function() {}).

addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element"
            });
})

Это обеспечит выполнение полифилла веб-компонентов для браузеров, которые его не поддерживают. Если элемент импортируется с помощью импорта html, прослушиватель событий не требуется. Дополнительные сведения см. на странице https://github.com/webcomponents/webcomponentsjs#webcomponentsready.

Ответ на редактирование: импортируйте полимер.html в файл тестовых элементов и "удалите" его из файла index.html. Лучший подход — определить файл elements.html, импортировать все ваши элементы (включая test-element) в файл elements.html и импортировать файл elements.html в файл index.html. Также в каждом файле ваших элементов (например, test-element.html) убедитесь, что вы импортируете все зависимости. Я бы посоветовал вам начать с полимерного стартового набора

person Srik    schedule 21.10.2015
comment
Ницца! что делать, если у меня есть несколько элементов Polymer в разных файлах? Вы бы реализовали эту функцию обратного вызова в каждом полимерном элементе? внутри js? - person Alejandro; 21.10.2015
comment
Если вы импортируете элемент с помощью импорта html, прослушиватель событий не требуется. Сценарий в вашем index.html может запускаться даже до того, как полифилл будет завершен, и, следовательно, требуется прослушиватель событий для завершения полифилла. Импорт html будет работать только после завершения полифилла, поэтому элементы внутри вашего импорта html не будут иметь проблем. - person Srik; 21.10.2015
comment
Он работает, добавляя его внутрь купольного модуля. Теперь вы говорите, что это требуется только в файле index.html и для браузеров, отличных от Chrome. Как я могу справиться с тем, что он запускается только тогда, когда это нужно браузеру? - person Alejandro; 21.10.2015
comment
У вас может быть прослушиватель событий в браузере chorme, и он будет работать. Я просто пытался подчеркнуть, что полифилл веб-компонентов должен выполняться для браузеров, отличных от Chrome. Этот прослушиватель событий запускается даже для браузера Chrome, поэтому проблем нет. - person Srik; 21.10.2015
comment
Спасибо за все что ты сделал для меня! Я отредактировал свой вопрос. Не могли бы вы взглянуть? еще раз спасибо! - person Alejandro; 21.10.2015
comment
попробуйте импортировать полимер.html в файл тестового элемента и «удалить» его из файла index.html. Лучший подход — определить файл elements.html, импортировать тестовый элемент в файл elements.html и импортировать файл elements.html в файл index.html. Я бы посоветовал вам начать с полимерного стартового набора. - person Srik; 21.10.2015
comment
Не работает без прослушивателя событий. Проверил все, но не работает :( Спасибо, хотя - person Alejandro; 21.10.2015
comment
Вот эталонное решение без прослушивателя событий, которое работает в Firefox. plnkr.co/edit/13QJ7QFETIBg4bEiCMS7?p=preview - person Srik; 22.10.2015