title: Polymer 1.0 on firefox ReferenceError: Polymer is not defined
body: <p>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:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;?php use Cake\Routing\Router; ?&gt;
          &lt;?php echo $this-&gt;Html-&gt;script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?&gt;
          &lt;link rel="import" href="&lt;?= Router::url('/'); ?&gt;bower_components/polymer/polymer.html"&gt;
  
          &lt;dom-module id="test-element"&gt;
              &lt;template &gt;
                  &lt;h1&gt;It works&lt;/h1&gt;
              &lt;/template&gt;
              &lt;script&gt;
                  Polymer({
                      is: "test-element"
                  });
              &lt;/script&gt;
          &lt;/dom-module&gt;
      &lt;/head&gt;
      &lt;body unresolved&gt;
          &lt;test-element&gt;&lt;/test-element&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have tried changing </p>
  
  <pre><code>&lt;?php echo $this-&gt;Html-&gt;script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?&gt;
  </code></pre>
  
  <p>to </p>
  
  <pre><code>&lt;?php echo $this-&gt;Html-&gt;script('/bower_components/webcomponentsjs/webcomponents.js'); ?&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;?php echo $this-&gt;Html-&gt;script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>ReferenceError: Polymer is not defined
  </code></pre>
  
  <p>I haven't been able to test it with Safari but I expect a similar result.</p>
  
  <p>Am I doing anything wrong? how can I make this work?</p>
  
  <p>Also I tried deleting the webcomponents and runing bower update to install them again.</p>
  
  <p>thank you</p>
  
  <p>EDIT:</p>
  
  <p>I have two files. index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;?php use Cake\Routing\Router; ?&gt;
          &lt;?php echo $this-&gt;Html-&gt;script('/bower_components/webcomponentsjs/webcomponents.js'); ?&gt;
          &lt;link rel="import" href="&lt;?= Router::url('/'); ?&gt;bower_components/polymer/polymer.html"&gt;
          &lt;?=  $this-&gt;element('Polymer/test-element');?&gt;
      &lt;/head&gt;
      &lt;body unresolved&gt;
          &lt;test-element&gt;&lt;/test-element&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the element file:</p>
  
  <pre><code>&lt;dom-module id="test-element"&gt;
      &lt;template &gt;
          &lt;h1&gt;It works&lt;/h1&gt;
      &lt;/template&gt;
      &lt;script&gt;
          addEventListener('WebComponentsReady', function() {
              Polymer({
                  is: "test-element"
              });
          });
      &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>This works fine. My problem is if I delete the addEventListener. The Firefox gets the same error:</p>
  
  <pre><code>ReferenceError: Polymer is not defined
  </code></pre>
  
  <p>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?</p>
  
  <p>Thank you</p>