javascript - Polymer import dynamic HTML -

i'm working product listing mobile app using polymer

so wanted load product details 3 images decription , other details when click on thumbnail,

i'm using core-animated-pages show product thumbnail , detail view

here html

<div id="article-content" > <template is="auto-binding" id="page-template" >  <core-ajax     id="ajaxpolo" auto     url="./json/products.json"     handleas="json"     response="{{productlist}}">   </core-ajax> <core-animated-pages id="fpages" flex selected="{{$.polo_cards.selected}}" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all slide-from-right"> <section vertical layout>       <div id="noscroll" fit hero-p>         <div id="container" flex horizontal wrap around-justified layout cross-fade >           <section on-tap="{{selectview}}" id="polo_cards" >              <template repeat="{{item in productlist}}">               <div class="card" vertical center center-justified layout hero-id="item-{{item.id}}" hero?="{{$.polo_cards.selected === item.id || lastselected === item.id }}" > <span cross-fade hero-transition style="">{{item.name}}</span></div>             </template>  </section>         </div>       </div>     </section>      <template repeat="{{item in productlist}}">       <section vertical layout>         <div class="view" flex vertical center center-justified layout hero-id="item-{{item.id}}"    hero?="{{$.polo_cards.selected === item.id || $.polo_cards.selected === 0}}"   >           <core-icon-button class="go_back" icon="{{$.polo_cards.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{goback}}"></core-icon-button>           {{item.name}} <span cross-fade class="view-cont" style="height:1000px; overflow:scroll;"></span></div>       </section>     </template>     </core-animated-pages> </template> 

 template.selectview = function(e,detail,sender){      /* set core-animated page selected */     var = e.target.templateinstance.model.item.id;       sender.selected = i;       }); 

if put details in detail view take long load, wanted load html of each products when click on thumbnail

how can ?

i use app-router lazy-load elements or html, core-animated-pages. works cordova plug app. however, cautious since shadow dom not default in polymer 1.0 , <core-animated-pages> moved <neon-animated-pages> significant difference in apis, no-longer works when try port 1.0, @ least not until re-worked. but, if plan stick 0.5 or port 1.0 without using core-animated-pages, still works well. can check out here.