Polymer - Access element in dom-if template

Question

<dom-module id="my-view1">
  <template id="methodScope">
    <paper-dialog id="modal1">
      <paper-swatch-picker></paper-swatch-picker>
      <paper-button dialog-confirm autofocus>Fertig</paper-button>
    </paper-dialog>
    <paper-toast id="copiedColor" text="Farbe in die Zwischenablage kopiert!"></paper-toast>
  </template>

  <template id="create" is="dom-if" if="{{mapChosen}}" restamp="true">
    <iron-ajax auto url$="{{mapJson}}" handle-as="json" last-response="{{mapData}}"></iron-ajax>

    <paper-button id="button1">Data</paper-button>
  </template>

  <script>
    Polymer({
      is: 'my-view1',
      attached: function(event) {
        dialog = this.$.modal1;
        colorPick = this.$.colorpicker;
        var self = this;
        this.$.colorpicker.addEventListener('color-picker-selected',function() {
          self._alertColor()
          self.selectedColor = colorPick.color;
          self.copyToClipboard(colorPick.color);
          dialog.close();
          console.log("fired");
        })
      }
      var button = this.$.button1;
    });
 </script>
</dom-module>

Accessing elements outside of the dom-if template works perfectly, but no matter what I do, I cannot access them inside of it. I already tried using this.async and this.$$ - all returning undefined. How would I be able to access the button in the template with the dom-if and id "create"?

I've cut some of the code, so if you don't see some functions or other things, that's because of that

Answer 1

Try listening on dom-change event. Below is an example for dom-repeat but same should work with dom-if also

 <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> <dom-module id="repeat-completion"> <template> <style></style> <template is="dom-repeat" items="{{items}}" as="item" on-dom-change="_domComplete"> <div id$="num{{index}}">{{item}}</div> </template> </template> </dom-module> <script> Polymer({ is: 'repeat-completion', properties: { items: { type: Array, value: function() { return [1, 2, 3, 4, 5] } } }, _domComplete: function(e) { if (e.returnValue) console.log(this.$$("#num1")); } }) </script> <repeat-completion></repeat-completion>