無法使用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

Answer 2

對於我使用的聚合物1.0，這似乎自2014年以來發生了變化

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

更多信息請訪問： https ： //www.polymer-project.org/1.0/docs/devguide/local-dom