javascript - 如何判断是否加载了 polymer 元件？

Question

我想使用 Polymer.import( elements, callback ) 动态导入元素。如果元素已经导入，则永远不会调用回调，否则在加载元素时调用。

问题是:是否有一种标准的方法来确定是否加载了 polymer 元素？

Answer 1

在您注册元素之前，它会被视为标准 HTMLElement。

因此，您可以通过以下方式检查元素:

<!-- IN HEAD: core-pages would be loaded -->
<link href="core-pages/core-pages.html" rel="import"> 
...

<!-- IN BODY: core-animated-pages would be NOT loaded -->
<core-pages id='reg'></core-pages>
<core-animated-pages id='unreg'></core-animated-pages>
...

<script>
  document.addEventListener('polymer-ready', function(e) {
    /* will print false ⇒ registered */
    console.log(document.getElementById('reg').constructor === HTMLElement);
    /* will print true ⇒ unregistered */
    console.log(document.getElementById('unreg').constructor === HTMLElement);
  });
</script>

实例:http://plnkr.co/edit/uqxn6RlBXZ3746AhTnON?p=preview