Polymer App более 1 страницы

Question

Привет, ребята, я сейчас работаю в новом проекте. В основном я пытаюсь создать приложение с более чем 1 страницей.

Я выбираю железные страницы, чтобы показать, какую страницу отображать. Я создаю 2 пользовательских компонента и. На данный момент это только тег h2.

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

Вопрос: это правильная архитектура? Почему элементы не отображаются на странице?

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

Answer 1

Насколько я могу судить, с вашей архитектурой все в порядке.

Может быть, проверить версии на ваших зависимостях?

Вот рабочий фрагмент для справки с использованием сегодняшних (22.03.2017) версий (wc 1.0.0-rc.6, тенистый 1.0.0-rc.2, полимер 2.0.0-rc.3, железо 2.0-превью),

Когда Polymer 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>