Web-Komponenten in Vanille JavaScript

Ich habe eine kleine Web-Komponente ohne Rahmen erstellt. Das ist mein index.html:Web-Komponenten in Vanille 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>

und das ist mein 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'); 
    } 

});

Der Browser-Konsole zeigt diesen Fehler:

undefined 

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

Warum kann mein Inline-Skript Zugang cID und method()?

Quelle

2016-12-28 asv

passiert es immer noch, wenn Sie die Auswahl einer Variablen zuweisen und dann die Methoden aufrufen? So etwas wie 'var clock = document.querySelector ('clock-digital'); clock.method(); ' –

Danke ich muss async auch entfernen – asv

Ihre Inline-Skript ausgeführt wird vorclock.js importiert wird (was denn asynchron ist von der async Attribut, das Sie zu dem <script> Tag hinzugefügt haben). Da das Element in clock.js definiert ist, sind <clock-digital>.method und <clock-digital>.cID noch nicht vorhanden, wenn Ihr Inline-Skript versucht, auf sie zuzugreifen.

Ein paar Optionen:

Entfernen Sie die async Tag, so dass der Import synchron, bevor Sie Inline-Skript passiert, läuft (demo). Sie würden den Vorteil der asynchronen Last verlieren, aber das ist möglicherweise kein Problem für Sie.
Führen Sie Ihre Inline-Skript nach einem Timeout (clock.js ermöglicht zu beenden Import),

Quelle

2016-12-28 12:06:13 tony19

Es ist Arbeit, wenn ich async entferne und wenn ich schreibe var clock = document.querySelector ('clock-digital'); Takt.Methode(); – asv

Das Async-Tag ist Ihr Hauptproblem. In der [demo] (http://plnkr.co/edit/jgM7NVRFdHi5xu6m7K28?p=preview) konnten Sie sehen, dass nur das Entfernen von 'async' erlaubt, dass Ihr ursprünglicher Code wie vorgesehen funktioniert. Nicht "Uhr" im Cache ist nicht das Problem. – tony19

Ja, Sie haben Recht. – asv

Um das Skript asynchron (async) zu halten, die manchmal besser ist, können Sie eine onload Ereignishandler zum <script> Element hinzufügen, dass wird Ihr Inline-Skript aufrufen:

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

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

Quelle

2016-12-28 14:49:49 Supersharp

Vielen Dank. – asv

Sie können upvote, wenn es geholfen hat :-) – Supersharp

Web-Komponenten in Vanille JavaScript

Antwort

Verwandte Themen