Search code examples
javascriptmacossafaripolymerweb-component

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

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