Polymer 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>。但它没有在浏览器中呈现。

我该如何解决这个问题？

更新 01:

我刚刚检查了我的开发者控制台，似乎我在 my-view1 中没有 #shadow-root：

在初学者工具包中，它应该是：

这是否意味着 my-view1 没有渲染？

Answer 1

您需要将 my-view1 导入 long-calendar-app.html.

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

Polymer 2.0 - 自定义组件未显示

Polymer 2.0 - custom component not showing

html

custom-component

polymer