title: How to set scroll-target on an iron-list within an app-header-layout with has-scrolling-region
body: <p>I am trying to use an <code>iron-list</code> (and <code>iron-scroll-threshold</code>) within a <code>app-header-layout</code> with <code>has-scrolling-region</code>.</p>
  
  <p>I generated the basic app layout with the polymer-CLI. </p>
  
  <p>If I do not use <code>has-scrolling-region</code> on the <code>app-header-layout</code> and use <code>"document"</code> for <code>scroll-target</code> on the <code>iron-list</code> it kinda works. But with this solution the scrollbar belongs to the window and does not slide beneath the header and I obviously cannot get the nice "waterfall" behaviour that is usually associated with these kinds of layouts.</p>
  
  <p>Therefore, I use <code>has-scrolling-region</code> on the <code>app-header-layout</code>, but what is the right way to pass the corresponding scoller to the <code>scroll-target</code> property of the <code>iron-list</code>?</p>
  
  <pre><code>  &lt;!-- Main content --&gt;
    &lt;app-header-layout has-scrolling-region id="layout"&gt;
      &lt;app-header condenses reveals effects="waterfall"&gt;
        &lt;app-toolbar&gt;
          &lt;paper-icon-button icon="menu" drawer-toggle&gt;&lt;/paper-icon-button&gt;
          &lt;div title&gt;Twiamo&lt;/div&gt;
        &lt;/app-toolbar&gt;
      &lt;/app-header&gt;
  
      &lt;iron-pages role="main" selected="[[page]]" attr-for-selected="name" id="page"&gt;
        &lt;my-iron-list name="view1" scroll-target="[[_getScrollTarget()]]"&gt;&lt;/my-iron-list&gt;
        &lt;my-view2 name="view2"&gt;&lt;/my-view2&gt;
        &lt;my-view3 name="view3"&gt;&lt;/my-view3&gt;
      &lt;/iron-pages&gt;
    &lt;/app-header-layout&gt;
  </code></pre>
  
  <p>I looked into the implementation of <code>app-header-layout</code> to find the right element. This expression actually yields me the right element and everything works fine. </p>
  
  <pre><code>_getScrollTarget: function() {
      return this.$.layout.shadowRoot.querySelector("#contentContainer");        
  }
  </code></pre>
  
  <p>But there has to be a better, a right way? Grabbing into the shadow DOM of the <code>app-header-layout</code> is not exactly using "public interface"!</p>
  
  <p>To complete the example, here my code for <code>my-iron-list</code>. <code>My-iron-list</code> wraps and iron-list, <code>iron-scroll-theshold</code>, and some dummy data provider stuff. The <code>scroll-target</code> on <code>my-iron-list</code> is just passed to the <code>iron-list</code> and <code>iron-scroll-threshold</code> within <code>my-iron-list</code>:</p>
  
  <pre><code>&lt;dom-module id="my-iron-list"&gt;
    &lt;template&gt;
      &lt;iron-list items="[]" as=item id="list" scroll-target="[[scrollTarget]]"&gt;
        &lt;template&gt;
          &lt;div class="item"&gt;[[item]]&lt;/div&gt;
        &lt;/template&gt;
      &lt;/iron-list&gt;
  
      &lt;iron-scroll-threshold
          id="scrollTheshold"
          lower-threshold="100"
          on-lower-threshold="_loadMoreData"
          scroll-target="[[scrollTarget]]"&gt;      
      &lt;/iron-scroll-threshold&gt;    
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
  
        is: 'my-iron-list',
  
        properties: {
          page: {
              type : Number,
              value : 0
          },
          perPage: {
              type : Number,
              value : 100
          },
          scrollTarget: HTMLElement,
        },
  
        _pushPage: function() {
            for (i = 0; i &lt; this.perPage; i++) {
              this.$.list.push('items', 'Entry number ' + (i+1+this.page*this.perPage));   
            }
        },
  
        _loadMoreData: function() {
            this._pushPage();
            this.page = this.page + 1;
            this.$.scrollTheshold.clearTriggers();
        }
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>