Search code examples
canvasdartdart-polymer

Accessing element in template


How does one get access to the elements inside of a template? I currently have a canvas inside of a polymer element, but can not seem to find a clean way to get the canvas.

@CustomTag('level-selector-item2')
class LevelSelectorItem2 extends PolymerElement {
  LevelSelectorItem2.created() : super.created() {
  }
}

Here is the template:

<polymer-element name="level-selector-item2" attributes="level">
  <template>
    <div>
      <canvas style="width: 300px; height: 200px" id="levelIcon"></canvas>
    </div>
  </template>
</polymer-element>

Using this.querySelector always seem to return null, all in the created, ready and enteredView events.


Solution

  • And of course, after 2 hours of searching, and 20 minutes after I post the question. I find the answer:

      void enteredView() {
        super.enteredView();
        CanvasElement canvas = $['levelIcon'];
      }
    

    Thanks to this sample code: https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/automatic_node_finding