title: How to execute a script when the custom element is upgraded
body: <p>I have defined a custom element and I want to execute a script only when the custom element is upgraded to its registered type. The use case is that I must call a custom method.</p>
  
  <p>My main html file looks like this:</p>
  
  <pre><code>&lt;project-list&gt;&lt;/project-list&gt;
  &lt;script&gt;
      var project_list = document.getElementsByTagName("project-list")[0]
      project_list.custom_method("some_data");
  &lt;/script&gt;
  </code></pre>
  
  <p>The custom element is registered in a HTML import like this:</p>
  
  <pre><code>&lt;script&gt;
    "use strict";
    var currentScript = document._currentScript || document.currentScript;
  
    class ProjectList extends HTMLElement {
  
      createdCallback(){
        console.log("created");
      }
  
      custom_method(data) {
        console.log("custom_method() OK");
        console.log(data);
  
        this.innerHTML = data;
      }
  
    }
  
    document.registerElement("project-list", ProjectList);
  &lt;/script&gt;
  </code></pre>
  
  <p>My question is simple: <strong>how to make sure the script in the main html file is called only after the custom element gains its <code>custom_method</code> method?</strong></p>
  
  <p>I'm looking for an elegant solution. Something that the spec authors would have thought of. I don't mind changing the architecture quite a bit (for example by moving the javascript from the main file into another custom element if that is necessary).</p>