How to execute a script when the custom element is upgraded

user_6020072 0
Viewed 3380

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.

My main html file looks like this:

<project-list></project-list>
<script>
    var project_list = document.getElementsByTagName("project-list")[0]
    project_list.custom_method("some_data");
</script>

The custom element is registered in a HTML import like this:

<script>
  "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);
</script>

My question is simple: how to make sure the script in the main html file is called only after the custom element gains its custom_method method?

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).

html-imports custom-element web-component html javascript
2 Answers

Load the dependency via an import in your custom element module. For example, a custom element module (e.g.something.mjs) which depends on Highcharts:

import '/node_modules/highcharts/highcharts.js'

class Something extends HTMLElement {}

customElements.define('x-something', Something)
user_10296440
Related