Cannot access Canvas Element inside Polymer custom-element with Javascript -

Cannot access Canvas Element inside Polymer custom-element with Javascript -

i playing around polymer-project web-components library google. want build custom-tag canvas element included , access within custom-element via javascript. cant access document.queryselector or document.getelementbyid - hint or experience similar problem appreciated.

here's source:

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

the console.log output returns null / empty collection, doesnt matter @ part of life-cycle seek phone call canvas. where's error , doing wrong?

best regards, lupo

document.getelementsbytagname('canvas') , document.queryselector('.leinwand') looking nodes in main document. want query within element's shadow dom:

<canvas id="c" class="leinwand" width="200" height="200"></canvas> console.log(this.$.c); console.log(this.shadowroot.queryselector('.leinwand'));

i'm using polymer's automatic node finding first example. sec shows how can utilize this.shadowroot "scope" qs/qsa within shadow dom.

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

javascript canvas html5-canvas polymer shadow-dom