title: How to wait for Custom Element reference to be "upgraded"?
body: <p>I have a reference to an element that will at some point be upgraded to a custom element. How do I wait for it to be upgraded?</p>
  
  <p>For example, suppose <code>el</code> is the reference. If it hypothetically had a promise attached to it for this purpose, code could be similar to</p>
  
  <pre><code>await el.upgradePromise
  // do something after it has been upgraded.
  </code></pre>
  
  <p>That of course doesn't exist, but describes what I want to do. Maybe there is no way to do it without polling? If I use polling, what would I poll for (suppose I don't have a reference to the class constructor that it should upgrade to).  Maybe I can poll <code>el.constructor</code> and wait for it not to be <code>HTMLElement</code>, or wait for it not to be <code>HTMLUnknownElement</code>?</p>
  
  <p>EDIT: for background, I have some code like the following, where using setTimeout is a hack in order for the code to work. The first <code>console.log</code> outputs false, while the one in the timeout outputs true.</p>
  
  <pre><code>import OtherElement from './OtherElement'
  
  class SomeElement extends HTMLElement {
      attachedCallback() {
          console.log(this.children[0] instanceof OtherElement) // false
  
          setTimeout(() =&gt; {
              console.log(this.children[0] instanceof OtherElement) // true
          }, 0)
      }
  }
  </code></pre>
  
  <p>where <code>OtherElement</code> is a reference to a Custom Element class that will at some point be registered. Note, I'm using Chrome v0 <code>document.registerElement</code> in my case. The timeout is needed because if <code>SomeElement</code> is registered first as in the following code, then <code>OtherElement</code> will not yet be registered, so therefore if the child of the <code>SomeElement</code> element is expected to be an instance of <code>OtherElement</code>, then that will not be the case until those elements are upgraded next.</p>
  
  <pre><code>document.registerElement('some-el', SomeElement)
  document.registerElement('other-el', OtherElement)
  </code></pre>
  
  <p>Ideally, a timeout like that is undesirable, because if upgrade happens to take a longer time (for some unknown reason that could depend on the browser implementation) then the timeout hack will also fail.</p>
  
  <p>I'd like an absolute way to wait for something to be upgraded without possible failure, and without polling if possible. Maybe it needs to be canceled after some time too?</p>
  
  <p>EDIT: The ideal solution would allow us to wait for the upgrade of any third-party custom elements without needing to modify those elements before runtime, and without having to monkey patch then at runtime.</p>
  
  <p>EDIT: From observing Chrome's v0 behavior, it seems like the first call to <code>document.registerElement('some-el', SomeElement)</code> causes those elements to be upgraded and their <code>attachedCallback</code> methods to be fired <em>before</em> the registration of <code>OtherElement</code>, so the children will not be of the correct type. Then, by deferring logic, I can run logic after the children have also been upgraded to be of type <code>OtherElement</code>.</p>
  
  <p>EDIT: Here's a jsfiddle that shows <a href="https://jsfiddle.net/wkwmzLwL" rel="noreferrer">the problem</a>, and here's a jsfiddle that shows <a href="https://jsfiddle.net/aqp4uaja" rel="noreferrer">the timeout hack solution</a>. Both are written with Custom Elements v1 API in Chrome Canary, and won't work in other browsers, but the problem is the same using Chrome Stable's Custom Elements v0 API with <code>document.registerElement</code> and <code>attachedCallback</code> instead of <code>customElements.define</code> and <code>connectedCallback</code>. (See console output in both fiddles.)</p>