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 automatic node finding。第二部分展示了如何使用this.shadowRoot到＆＃34;范围＆＃34;阴影dom里面的qS / qSA。

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

Answer 2

自2014年以来，这似乎发生了变化，因为我使用的聚合物1.0

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

了解更多信息： here

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

2 个答案: