无法使用Javascript访问Polymer custom-element中的Canvas Element

Question

我正在玩Google的Polymer-Project Web-Components Library.我想构建一个包含canvas元素的自定义标记,并通过javascript从custom元素中访问它.但我无法使用document.querySelector或document.getElementById访问它 - 任何有类似问题的提示或经验都表示赞赏.

这是我的来源:

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

console.log输出总是返回一个NULL /空集合,无论我在生命周期的哪个部分尝试调用画布都无关紧要.哪里是我的错,我做错了什么？

最好的问候,卢波

Answer 1

document.getElementsByTagName('canvas')并document.querySelector('.leinwand')正在寻找主文档中的节点.您想在元素的阴影dom内查询:

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

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

我在第一个例子中使用Polymer的自动节点查找.第二部分展示了如何this.shadowRoot在阴影dom中使用"范围"qS/qSA.

演示:http://jsbin.com/bogorose/1/edit