Simple Polymer组件在Safari 10上不起作用

Question

Why this code works on Chrome but not on Safari ? 为什么此代码适用于Chrome但不适用于Safari？ Error : ReferenceError: Can't find variable: Polymer 错误：ReferenceError：找不到变量：Polymer

Mac OSX 10.11.6. 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>

Answer 1

It's because in Chrome <link rel="import"> is processed synchronously, while in Safari it is first not recognized (because not implemented natively). 这是因为在Chrome中， <link rel="import">是同步处理的，而在Safari中则首先无法识别（因为未在本地实现）。 So Polymer() is not defined when it is parsed. 因此解析时未定义Polymer() 。

You should wait for the HTMLImportsLoaded event before invoking Polymer(). 您应该在调用Polymer（）之前等待HTMLImportsLoaded事件。

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

You can also use instead HTMLImports.whenReady() as explained in the Polymer documentation . 您也可以使用HTMLImports.whenReady()如Polymer文档中所述。

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

Simple Polymer组件在Safari 10上不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-02-19 11:24:08

Simple Polymer组件在Safari 10上不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-02-19 11:24:08

解决方案1
3 已采纳 2017-02-19 11:24:08