小编Mil*_*red的帖子

如何在升级自定义元素时执行脚本

我已经定义了一个自定义元素,我只想在自定义元素升级到其注册类型时才执行脚本.用例是我必须调用自定义方法.

我的主要html文件如下所示:

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

自定义元素在HTML导入中注册,如下所示:

<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>
Run Code Online (Sandbox Code Playgroud)

我的问题很简单:如何确保主要html文件中的脚本仅在自定义元素获得其custom_method方法后才被调用?

我正在寻找一个优雅的解决方案.规范作者会想到的东西.我不介意更改架构(例如,如果有必要,可以将javascript从主文件移动到另一个自定义元素中).

javascript html5 web-component custom-element html-imports

11
推荐指数
1
解决办法
1173
查看次数