Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Get started
Build an element
1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties
Build an app
1. Get set up 2. Create a new page 3. Add some elements 4. Deploy

The starter-kit includes 3 placeholder pages you can use to start building out the views of your application. But at some point, you'll probably want to add more.

This step takes you through the process of adding a new page or top-level view to your application.

First, create a new custom element that encapsulates the contents of your new view.

  1. Create a new file called src/my-new-view.html and open it in an editor.

  2. Add some scaffolding for a new custom element definition using Polymer:

    <link rel="import" href="../bower_components/polymer/polymer.html">
    
    <dom-module id="my-new-view">
      <!-- Defines the element's style and local DOM -->
      <template>
        <style>
          :host {
            display: block;
    
            padding: 16px;
          }
        </style>
    
        <h1>New view</h1>
      </template>
      <!-- Creates the element's prototype and registers it -->
      <script>
        Polymer({
          is: 'my-new-view'
        });
      </script>
    </dom-module>
    
    

For now your element is very basic, and just has a <h1> that says "New View", but we can return to it and make it more interesting later.

  1. Open src/my-app.html in a text editor.

  2. Find the set of existing pages inside the <iron-pages>:

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-view404 name="view404"></my-view404>
    </iron-pages>
    

    The <iron-pages> is bound to the page variable that changes with the route, and selects the active page while hiding the others.

  3. Add your new page inside the iron-pages:

    <my-new-view name="new-view"></my-new-view>
    

    Your <iron-pages> should now look like this:

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-new-view name="new-view"></my-new-view>
      <my-view404 name="view404"></my-view404>
    </iron-pages>
    

    Note: Normally when adding a new custom element for the first time, you'd want to add an HTML Import to ensure the component definition has been loaded. However, this app template is already set up to lazy-load top level views on-demand based on the route, so in this case you don't need to add an import for your new <my-new-view> element.

    The following code that came with the app template will ensure the definition for each page has been loaded when the route changes. As you can see, we followed a simple convention ('my-' + page + '.html') importing the definition for each route, and you can adapt this code as you like to handle more complex routing and lazy loading.

    Existing template code—you do not need to add this

    _pageChanged: function(page) {
      // Load page import on demand. Show 404 page if fails
      var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
      this.importHref(resolvedPageUrl, null, this._showPage404, true);
    },
    

Last, we'll add a menu item in the left-hand drawer to allow navigating to your new page.

  1. Keep src/my-app.html open in your editor.

  2. Find the navigation menu inside the <app-drawer> element.

    <!-- Drawer content -->
    <app-drawer>
      <app-toolbar>Menu</app-toolbar>
      <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
        <a name="view1" href="/view1">View One</a>
        <a name="view2" href="/view2">View Two</a>
        <a name="view3" href="/view3">View Three</a>
      </iron-selector>
    </app-drawer>
    

    Each navigation menu item consists of an anchor element (<a>) styled with CSS.

  3. Add the following new navigation item to the bottom of the menu.

    <a name="new-view" href="/new-view">New View</a>
    

    Your menu should now look like the following:

    ...
    <!-- Drawer content -->
    <app-drawer>
      <app-toolbar>Menu</app-toolbar>
      <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
        <a name="view1" href="/view1">View One</a>
        <a name="view2" href="/view2">View Two</a>
        <a name="view3" href="/view3">View Three</a>
        <a name="new-view" href="/new-view">New View</a>
      </iron-selector>
    </app-drawer>
    ...
    

Your new page is now ready! Open your web browser and view it at http://localhost:8080/new-view.

Example of new page

When you deploy your application to the web, you'll use the Polymer CLI to prepare your files for deployment. Polymer CLI will need to know about any demand-loaded fragments like the lazy-loaded view you just added.

  1. Open polymer.json in a text editor.

  2. Add src/my-new-view.html to the list of fragments.

    The new list should look like this:

    "fragments": [
      "src/my-view1.html",
      "src/my-view2.html",
      "src/my-view3.html",
      "src/my-new-view.html",
      "src/my-view404.html"
    ]
    

Note: You only need to add files you will lazy load or import using the async attribute to the fragments list. Any files that are imported using synchronous <link rel="import"> tags should not be added to fragments.

Now that you've added a new page to your application, learn how to add 3rd-party elements to your application, or how to deploy the app to the web.