Impossibile accedere all'elemento Canvas all'interno dell'elemento personalizzato Polymer con Javascript

Question

sto giocando con la libreria di componenti Web di Polymer-Project di Google. Voglio creare un tag personalizzato con un elemento canvas incluso e accedervi dall'interno dell'elemento personalizzato tramite javascript. ma non posso semplicemente accedervi con document.querySelector o document.getElementById - qualsiasi suggerimento o esperienza con un problema simile è apprezzato.

Ecco la mia fonte:

<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>  

L'uscita console.log restituisce sempre un valore NULL/insieme vuoto, importa doesnt in quale parte del ciclo di vita provo a chiamare la tela. Dov'è il mio errore e cosa sto sbagliando?

Con i migliori saluti, Lupo

Answer 1

document.getElementsByTagName('canvas') e document.querySelector('.leinwand') sono alla ricerca di nodi del documento principale. Si desidera eseguire una query all'interno dom ombra del vostro elemento:

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

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

sto usando di Polymer automatic node finding per il primo esempio. Il secondo mostra come utilizzare this.shadowRoot in "scope" qS/qSA all'interno della shadow dom.

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

Answer 2

Questo sembra essere cambiato dal 2014, di polimeri 1.0 Ho usato

console.log(this.$$('.leinwand')); 

per più un'occhiata qui: https://www.polymer-project.org/1.0/docs/devguide/local-dom