HTMLImports.whenReady和window.addEventListener（'WebComponentsReady'，function（e）{`之间有什么区别

Question

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

Polymer的官方文档说：

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

Webcomponents.org关于进口的官方文件说：

在本机导入下，主文档中的标签会阻止加载导入。这是为了确保导入已加载，并且其中的所有注册元素都已升级。这种本机行为很难进行polyfill，因此“ HTML导入” polyfill不会尝试。而是WebComponentsReady事件是此行为的代表：

两者有什么区别？

Answer 1

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

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

注意：如果由于某些原因，您CustomElement.js仅引用了polyfill（即没有HTMLImports.js功能），则仅WebComponentsReady引发该事件。

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

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

• 后者正在等待实例化自定义元素。它由CustomElement.jspolyfill 触发。
• 第一种是仅等待导入文件被加载和解析。发送HTMLImports.js后立即由polyfill 调用{HTMLImportsLoaded}。

但是，在正常情况下，因为自定义元素在注册后就立即实例化，所以这两个事件将一个接一个地发生。

年代顺序

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

这里更多。