Question

所以我通过Firefox浏览器学习聚合物，我遇到了Polymer未定义的错误。在研究SO时，我看到我必须将我的脚本包装在addEventListener函数中。

<link rel="import"  href="https://polygit2.appspot.com/components/polymer/polymer.html">

<script>
  // register a new element called proto-element
  //This example needs this eventlistener

  addEventListener('WebComponentsReady', function() {
  Polymer({
    is: "proto-element",

    // add a callback to the element's prototype
    ready: function() {
  this.textContent = "I'm a proto-element. Check out my prototype!"
    }
});
})
</script>

现在，当我在浏览器中运行它时它工作正常。转到DOM元素时，我的脚本似乎不再需要包含在addEventListener（）中。

这有效：

<dom-module id="dom-element">

 <template>
    <p>I'm a DOM element. This is my local DOM!</p>
 </template>

<script>
   //for some reason this example does not 
   //addEventListener('WebComponentsReady', function() {
  Polymer({
    is: "dom-element"
  });
//})
</script>

</dom-module>

所以我的问题是，为什么我的proto-element需要addEventListener函数而我的dom-module不需要？

Answer 1

此行为可以通过Web组件的polyfill来解释，这些（此时）仍然是Firefox所必需的。特别是，HTML imports需要进行polyfilled，这是通过fragmentTransaction.add(R.id.list_frame, list);脚本完成的（在示例中缺失）。

在您的第一个示例中，您实际上不必等待webcomponents-lite.js事件调用WebComponentsReady函数，而是Polymer()事件。因为，指出浏览器知道如何处理链接标记： HTMLImportsLoaded。然后导入Polymer库，您可以调用<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">。查看此JSBin，了解其工作原理。

在您的第二个示例中，浏览器首先不知道如何处理Polymer()，因为这是一个元素from the Polymer library而不是HTML规范的一部分。因此，<dom-module>仅在 HTMLImports事件触发后才可用。填充完填充后，<dom-module>升级，渲染模板并执行其中的脚本。换句话说，没有必要明确等待此事件，因为升级只能在事件触发后发生（或者如果它本身支持，就像在Chrome中一样）。

这是我的解释，但也许Polymer团队可以进一步澄清......

为什么我的proto元素需要addEventListener，而Polymer不需要我的dom元素？

1 个答案: