香草的Web组件JavaScript

我创建了一个没有任何框架的小组件。这是我的index.html：香草的Web组件JavaScript

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <script src="clock.js" async></script> 
</head> 

<body> 
    <clock-digital></clock-digital> 
    <script> 
     console.log(document.querySelector('clock-digital').cID); 
     document.querySelector('clock-digital').method(); 
    </script> 
</body> 

</html>

，这是我clock.js：

customElements.define('clock-digital', class extends HTMLElement { 

    get cID() {} 

    set cID(value) {} 

    constructor() { 
     super(); 
     var shadowRoot = this.attachShadow({ 
      mode: 'open' 
     }); 
     var that = shadowRoot; 
     this.cID = setInterval(function() { 
      var currentdate = new Date(); 
      that.innerHTML = `<div style="display: inline; background-color: whitesmoke; font-style: italic;">${currentdate.getHours()}:${currentdate.getMinutes()}:${currentdate.getSeconds()}</div>`; 
     }, 500); 
    } 

    method() { 
     console.log('method'); 
    } 

});

浏览器控制台显示此错误：

undefined 

(index):14 Uncaught TypeError: document.querySelector(...).method is not a function 
at (index):14

为什么我无法联脚本访问cID和method()？

来源

2016-12-28 asv

如果您将选择分配给一个变量，然后调用该方法吗？像'var clock = document.querySelector（'clock-digital'）; clock.method（）;' –

谢谢我必须删除异步 – asv

你的嵌入式脚本运行以前clock.js是进口的（因为async属性已添加到<script>标签，它是异步的）。由于元素在clock.js中定义，因此当您的内联脚本尝试访问它们时，<clock-digital>.method和<clock-digital>.cID尚不存在。

一对夫妇的选择：

删除async标记，以便导入您的内嵌脚本之前发生同步运行（demo）。你会失去异步加载的优势，但这对你来说可能不是问题。
运行您的内嵌脚本超时后（允许clock.js完成导入）

来源

2016-12-28 12:06:13 tony19

这是工作，如果我删除异步，如果我写var clock = document.querySelector（'clock-digital'）; clock.method（）; – asv

'async'标签是你的根本问题。在[demo]（http://plnkr.co/edit/jgM7NVRFdHi5xu6m7K28?p=preview）中，你可以看到只有删除'async'才能让原来的代码按预期工作。不缓存'时钟'不是问题。 – tony19

是的，你是对的。 – asv

为了保持脚本异步（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>

来源

2016-12-28 14:49:49 Supersharp

非常感谢。 – asv

你可以upvote，如果它帮助:-) – Supersharp

香草的Web组件JavaScript

回答

相关问题