CODEWITHSUNDEEP
javascriptmacossafaripolymerweb-component
Olof
Olof

Reputation: 544

Simple Polymer component doesn't work on Safari 10

Why this code works on Chrome but not on Safari ? Error : ReferenceError: Can't find variable: Polymer

Mac OSX 10.11.6.

Code : 

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="/node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
  <link rel="import" href="/node_modules/Polymer/polymer.html">
</head>
<body>
  <dom-module id="my-test">
    <template>
        Hello !
    </template>
  </dom-module>

  <script>
  Polymer({
      is: 'my-test'
    });
  </script>

  <my-test>
  </my-test>
</body>
</html>

Upvotes: 1

Views: 419

Answers (1)

Supersharp
Supersharp

Reputation: 31171

It's because in Chrome <link rel="import"> is processed synchronously, while in Safari it is first not recognized (because not implemented natively). So Polymer() is not defined when it is parsed.

You should wait for the HTMLImportsLoaded event before invoking Polymer().

<script>
    document.addEventListener( "HTMLImportsLoaded", function () {
        Polymer({
            is: 'my-test'
        });
    })
</script>

You can also use instead HTMLImports.whenReady() as explained in the Polymer documentation.

<script>
    HTMLImports.whenReady( function () {
        Polymer({
            is: 'my-test'
        });
    })
</script>

Upvotes: 3

Related Questions