Polymer 2.0 - 未显示自定义组件

时间:2017-03-27 11:42:17

标签: html polymer custom-component

我刚开始学习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>

只需从MyView1复制starter-kit

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>

如您所见,我已在<my-view1 name="view1"></my-view1>下面添加了<h2>Hello [[prop1]]</h2>。但它没有在浏览器中呈现。

我该如何解决这个问题?

Update01:

我只是检查了我的开发者控制台,似乎我#shadow-root中没有my-view1enter image description here

在入门套件中它应该是: enter image description here

这是否意味着my-view1没有发生渲染?

1 个答案:

答案 0 :(得分:0)

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

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