Polymer 1.0 on firefox ReferenceError: Polymer is

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

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