title: Polymer: How to add event listeners to custom polymer element under conditional template
body: <p>I have a custom element <code>&lt;y-list&gt;</code> which fires an event <code>'item-selected'</code>
  i am using this element in another custom element and when i try to add eventlistener to this element</p>
  
  <pre><code>&lt;dom-module id="my-list"&gt;
   &lt;template is="dom-if" if="{{show}}"&gt;
      &lt;y-list list="{{list}}"&gt;
      &lt;/y-list&gt;
      &lt;hr&gt;
   &lt;/template&gt;
  &lt;/dom-module&gt;
  
  Polymer({
  
  is: 'my-list',
  
  properties: {
  
    show: {
      type:Boolean,
      value:function() {
          return false
      }
    },
    list: {
      type:Array,
      value:[]
    }
  },
  ready: function(){
  },
  attached: function(){
     this.querySelector('y-list').addEventListener('item-selected', function(e){
     console.log(e.detail);
  }   
  });
  </code></pre>
  
  <p>i am getting the error
  <code>Cannot read property 'addEventListener' of null</code></p>
  
  <p>but if i remove <code>dom-if</code> condition or use <code>hidden$</code> i am able to find the element and add the eventlistener and listen to <code>item-selected</code> event</p>
  
  <p>I know that attached is called after ready so i am adding event listener in attached but i am unable to find the element even if i set the <code>show</code> attribute to <code>true</code> for <code>&lt;my-list&gt;</code></p>