`HTMLImports.whenReady`和`window.addEventListener（'WebComponentsReady'，function（e）{`

Question

HTMLImports.whenReady和window.addEventListener('WebComponentsReady', function(e) {之间的区别是什么？

Polymer's official documentation说：

  

“要在主HTML文档中定义元素，请从HTMLImports.whenReady（回调）中定义元素。当文档中的所有导入都加载完成后，将调用callback。”

Webcomponents.org's official documentation on imports说：

  

在本机导入下，主文档中的标记会阻止导入的加载。这是为了确保已加载导入，并且已升级其中的任何已注册元素。这种原生行为难以填充，因此HTML Imports polyfill不会尝试。相反，WebComponentsReady事件代表了这种行为：

两者有什么区别？

Answer 1

它们几乎 *相同：两者都是同时触发的。

因此，您可以在callback和Event之间选择自己喜欢的风格。

Nota Bene ：如果由于某些原因，您单独引用CustomElement.js polyfill（即没有HTMLImports.js功能），则只会WebComponentsReady事件发生被抛出

（我更喜欢使用Event Handler，因为在第一种情况下，您需要确保HTMLImports已定义，并且因为它是唯一记录的API here）

*：当然他们是不同的！差异在引用的定义中说明。

• 后者正在等待自定义元素实例化。它由CustomElement.js polyfill。
触发
• 第一个是等待加载和解析Imports。在HTMLImports.js发送完毕后，{HTMLImportsLoaded} polyfill会调用它。

然而，在正常情况下，因为自定义元素一旦注册就会被实例化，这两个事件将一个接一个地发生。

按时间顺序

1. <link rel=import>.onload()，
2. {HTMLImportsLoaded} event，
3. HTMLImports.whenReady()
4. {WebComponentsReady}活动

更多here。