Polymer 1.0 on firefox ReferenceError: Polymer is not defined

问题

Hello I have a working Polymer 1.0 web page on Chrome and Opera. Now I need the page to run in Firefox and Safari. I have the following test:

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

I have tried changing

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

I thought the Polyfills of webcomponents would take care of the html import. But it's not working. In firefox I get the following error:

ReferenceError: Polymer is not defined

I haven't been able to test it with Safari but I expect a similar result.

Am I doing anything wrong? how can I make this work?

Also I tried deleting the webcomponents and runing bower update to install them again.

thank you

EDIT:

I have two files. 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>

and the element file:

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

This works fine. My problem is if I delete the addEventListener. The Firefox gets the same error:

ReferenceError: Polymer is not defined

As if Polyfills were not loaded in time. Is there a way to fix this? Is adding the addEventListener the right way to do it?

Thank you

回答1:

Try wrapping your javascript under addEventListener('WebComponentsReady', function() {}).

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

This will ensure the webcomponents polyfill is completed for browsers that do not support it. If the element is imported using html import then the event listener is not required. Please refer to https://github.com/webcomponents/webcomponentsjs#webcomponentsready for more details.

Response for the edit: import polymer.html in your test-element file and 'remove' it from your index.html file. The best approach is to define an elements.html file, import all your elements (including test-element) into your elements.html file and import elements.html file into your index.html file. Also in each of your elements file (like test-element.html) make sure you import all the dependencies. I would suggest you to start with polymer-starter-kit

来源：https://stackoverflow.com/questions/33265769/polymer-1-0-on-firefox-referenceerror-polymer-is-not-defined

标签

firefox

polymer

web-component

polyfills

html-imports