Polymer App mehr als 1 Landseite

Question

Hallo Leute, ich arbeite derzeit in einem neuen Projekt. Im Grunde versuche ich eine App mit mehr als einer Landseite zu erstellen.

ich wählen Eisen-Seiten, welche Seite angezeigt werden zu zeigen. Ich erstelle 2 benutzerdefinierte Komponenten und. Mittlerweile ist es nur noch h2 tag.

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

Frage: Ist dies die richtige Architektur? Warum rendern die Elemente nicht in der Seite?

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

Answer 1

Nichts falsch mit Ihrer Architektur, soweit ich das beurteilen kann.

Vielleicht überprüfen Versionen auf Ihre Abhängigkeiten?

Hier ist ein Arbeits-Snippet als Referenz mit den heutigen (22.03.2017) Versionen (WC 1.0.0-rc.6, schattig 1.0.0-rc.2, Polymer 2.0.0-rc.3, Eisen 2.0-Vorschau).

Wenn Polymer 2.0 endgültig ist (bevorstehend), werden sich die Versionsnummern stabilisieren.

<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>