Zugriff auf Canvas-Element in Polymer benutzerdefinierte Element mit Javascript

Ich bin mit der Polymer-Projekt Web-Components-Bibliothek von Google. Ich möchte ein custom-tag mit einem canvas-Element erstellen und über JavaScript innerhalb des custom-elements darauf zugreifen. aber ich kann nicht nur mit document.querySelector oder document.getElementById darauf zugreifen - jeder Tipp oder Erfahrung mit einem ähnlichen Problem wird geschätzt.Zugriff auf Canvas-Element in Polymer benutzerdefinierte Element mit Javascript

Hier ist meine Quelle:

<polymer-element name="sprite-canvas"> 
<template> 
<style> 
.leinwand { 
width:200px; 
height:200px; 
background-color: lightblue; 
} 
</style> 
<canvas class="leinwand" width="200" height="200"></canvas> 
</template> 
<script> 

Polymer('sprite-canvas', { 
leinwand : null, 
ready: function() { 
console.log(document.getElementsByTagName('canvas')); 
console.log(document.querySelector('.leinwand')); 
}, 
domReady: function() { 
console.log(document.getElementsByTagName('canvas')); 
console.log(document.querySelector('.leinwand')); 
}, 
detached: function() { }, 
}); 
</script>

Der console.log Ausgang gibt immer eine NULL/leere Auflistung, spielt keine Rolle bei dem ein Teil des Lebenszyklus ich versuche, die Leinwand zu nennen. Wo ist mein Fehler und was mache ich falsch?

Mit freundlichen Grüßen, Lupo

Quelle

2014-06-19 Lupo

document.getElementsByTagName('canvas') und document.querySelector('.leinwand') suchen Knoten im Hauptdokument. Sie wollen in Ihrem Element Schatten dom abzufragen:

<canvas id="c" class="leinwand" width="200" height="200"></canvas> 

console.log(this.$.c); 
console.log(this.shadowRoot.querySelector('.leinwand'));

Ich verwende Polymer der automatic node finding für das erste Beispiel. Die zweite zeigt, wie Sie this.shadowRoot verwenden können, um qS/qSA innerhalb des Schattenbereichs zu "scope".

Demo: http://jsbin.com/bogorose/1/edit

Quelle

2014-06-19 17:16:59 ebidel

Großen. Vielen Dank! Freundliche Grüße. – Lupo