ポリマーアプリ1つ以上のランドページ

Question

こんにちは、私は現在新しいプロジェクトで働いています。基本的には、1つ以上のランドスケープでアプリを構築しようとしています。

私は、表示するページを示すために鉄のページを選択します。私は2つのカスタムコンポーネントとを作成します。今はh2タグだけです。

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

質問：これは正しいアーキテクチャですか？要素がページ内でレンダリングされないのはなぜですか？

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

Answer 1

私の知る限り、あなたのアーキテクチャと間違って何もありません。

あなたの依存関係のバージョンをチェックすることはありますか？

今日の（3/22/2017）バージョン（wc 1.0.0-rc.6、陰影1.0.0-rc.2、ポリマー2.0.0-rc.3、鉄2.0プレビュー）。

ポリマー2.0が最終（差し迫った）になると、バージョン番号が安定します。

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