普通 JavaScript 中的 Web 组件

Answer 1

您的内联脚本在导入clock.js之前运行

（这是异步的，因为您已将 

async

 属性添加到 

<script>

 标记）。由于该元素是在 

clock.js

 中定义的，因此当您的内联脚本尝试访问它们时，

<clock-digital>.method

 和 

<clock-digital>.cID

 还不存在。

几个选项：

删除
• async

   标签，以便导入在内联脚本运行之前同步发生（

  demo）。您将失去异步加载的优势，但这对您来说可能不是问题。
超时后运行内联脚本（允许
• clock.js

   完成导入）

Answer 2

为了保持脚本异步 (

async

)（有时效果更好），您可以向 

onload

 元素添加一个 

<script>

 事件处理程序，该处理程序将调用您的内联脚本：

<script>
  function init() {
      console.log(document.querySelector('clock-digital').cID);
      document.querySelector('clock-digital').method();  
  }
</script>

<script src="clock.js" async onload="init()"></script>

Answer 3

WebComponents API 已经为您介绍过了。只需在此处使用

customElements.whenDefined(tagName)

 承诺即可：

customElements.whenDefined('clock-digital').then(() => {
    console.log(document.querySelector('clock-digital').cID);
    document.querySelector('clock-digital').method();  
});