`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 说：

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

两者有什么区别？

Answer 1

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

因此您可以在callback 和Event 之间选择您最喜欢的口味。

注意事项：如果由于某些原因，您单独引用了 CustomElement.js polyfill（即没有 HTMLImports.js 功能），则只会抛出 WebComponentsReady 事件。

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

---

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

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

但在正常情况下，由于自定义元素一注册就实例化，所以这两个事件会一个接一个地发生。

时间顺序

1. <link rel=import>.onload(),
2. {HTMLImportsLoaded} 事件，
3. HTMLImports.whenReady()
4. {WebComponentsReady}事件

更多here.