polymerpolymer-starter-kitfirebase-polymer

Polymer App more than 1 landpage


Hi guys I'm currently work in a new project. Basically I'm trying to build an app with more then 1 landpage.

enter image description here

enter image description here

I choose iron-pages to show which page to display. I create 2 custom components and . By now it is only h2 tag.

[https://github.com/jeandersoncruz/my-app]

Question: Is this the correct architecture? Why is not the elements render in page?

https://my-app-e6032.firebaseapp.com/


Solution

  • Nothing wrong with your architecture, as far as I can tell.

    Maybe check versions on your dependencies?

    Here is a working snippet for reference using today's (3/22/2017) versions (wc 1.0.0-rc.6, shady 1.0.0-rc.2, polymer 2.0.0-rc.3, iron 2.0-preview).

    When Polymer 2.0 is final (imminent) the version numbers will stabilize.

      <base href="//polygit.org/webcomponentsjs+webcomponents+v1.0.0-rc.6/shadycss+webcomponents+1.0.0-rc.2/polymer+v2.0.0-rc.3/iron*+polymerelements+:2.0-preview/components/"></script>
      
      <script src="webcomponentsjs/webcomponents-loader.js"></script>
    
      <link rel="import" href="iron-pages/iron-pages.html">
      
      <shell-app></shell-app>
      
      <dom-module id="landpage-1">
        <template>
          <h2>Hello [[prop1]]</h2>
        </template>
        <script>
          class Mylandpage1 extends Polymer.Element {
            static get is() { return 'landpage-1'; }
            static get properties() {
              return {
                prop1: {
                  type: String,
                  value: 'landpage-1'
                }
              };
            }
          }
          window.customElements.define(Mylandpage1.is, Mylandpage1);
        </script>
      </dom-module>
    
      <dom-module id="shell-app">
        <template>
          <style>
            :host {
              display: block;
            }
          </style>
          <iron-pages selected="0">
            <div><landpage-1></landpage-1></div>
            <div><landpage-1></landpage-1></div>
          </iron-pages>
        </template>
        <script>
          class MyApplication extends Polymer.Element {
            static get is() { return 'shell-app'; }
            static get properties() {
              return {
                prop1: {
                  type: String,
                  value: 'shell-app'
                }
              };
            }
          }
          window.customElements.define(MyApplication.is, MyApplication);
        </script>
      </dom-module>