app-pages-loader | Vaadin

Component to load dinamically pages and keep a reduced DOM in huge apps.

[ This description is mirrored from at on 2019-05-10 ]

Published on


Component to load dinamically pages and keep a reduced DOM in huge apps.

<dom-bind id="demo">
      <label>Max nodes</label>
      <input value="{{maxNodes::input}}"/>
      <label>Max history</label>
      <input value="{{maxHistory::input}}"/>
      <select value="{{selected::input}}">
        <option value="view1">View 1</option>
        <option value="view2">View 2</option>
        <option value="view3">View 3</option>
        <option value="view404">View 404</option>
    <app-pages-loader selected="{{selected}}" fallback-selection="view404" max-nodes="{{maxNodes}}" max-history="{{maxHistory}}">
      <link rel="lazy-import" group="view1" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view2" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view3" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view404" href="./demo/components/page-test-404.html">
  var demo = document.querySelector('#demo');
  demo.selected = 'view1';

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.


Link to this version
ImportedReleased 26 May 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save jorgecasar/app-pages-loader"#0.1.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.0


  • polymer#Polymer/polymer#^2.0.0
  • lazy-imports#Polymer/lazy-imports#^2.0.0
  • iron-selector#PolymerElements/iron-selector#^2.0.0