聚合物2.0-自定義組件未顯示

Question

我剛剛開始學習polymer 2.0並進行了快速測試：

long-calendar-app.html:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="long-calendar-app">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]</h2>
    <my-view1 name="view1"></my-view1><!--Added to test and see if it works-->
  </template>

  <script>
    class MyApplication extends Polymer.Element {
      static get is() { return 'long-calendar-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'long-calendar-app'
          }
        };
      }
    }

    window.customElements.define(MyApplication.is, MyApplication);
  </script>
</dom-module>

然后從starter-kit復制MyView1 ：

my-view1.html:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <div class="card">
      <div class="circle">1</div>
      <h1>View One</h1>
      <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
      <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
    </div>
  </template>

  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
    }

    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

如您所見，我已經在<h2>Hello [[prop1]]</h2>下面添加了<my-view1 name="view1"></my-view1> <h2>Hello [[prop1]]</h2> 。 但是它沒有在瀏覽器中呈現。

我該如何解決？

Update01：

我只是檢查我的開發者控制台，而my-view1似乎沒有#shadow-root ：

在入門套件中，它應該是：

這是否意味着my-view1不會渲染？

Answer 1

您需要將my-view1導入long-calendar-app.html。

即<link rel="import" href="../my-view1/my-view-1.html">