javascript - Loading polymers iron-list in parts, when scrollbar is outside shadow-dom -

my polymer-application uses app-layout-structure. root-element can simplified follows:

<app-drawer-layout fullbleed>   <app-drawer swipe-open>     <iron-selector selected="{{page}}" attr-for-selected="name" role="navigation">       <!-- list of side menu options -->     </iron-selector>   </app-drawer>   <app-header-layout has-scrolling-region>     <app-header fixed effects="waterfall">       <!-- top menu -->     </app-header>     <iron-pages role="main" selected="[[page]]" attr-for-selected="name">       <!-- here custom elements can selected via menu -->     </iron-pages>   </app-header-layout> </app-drawer-layout> 

when meny-option clicked, page displayed. 1 page lists many items want in < iron-list >.

i'm having problems getting resized when scrolling scrollbar in parent of it's parent.

ready: function(){   //this app-header-layout element root   this.$.ironlist.scrolltarget = this.parentnode.parentnode; }, 

i stuck @ having list showing scroll-offset number of hits, , never loading more. properties firstvisibleindex (0) , lastvisibleindex (8, number of items shown, less scroll-offset) remains unchanged. when set iron-list.scrolltarget (iron-pages, app-header-layout didn't work) , fire iron-resize other items shown, lastvisibleindex last index.

i think need right scrolltarget cause approach doesn't work correct. need find app-header element , own scrolltarget:

ready: function(){    //get parent node , query app-header    this.$.ironlist.scrolltarget = this.domhost.$$('app-header').scrolltarget; }