我刚开始学习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-view1
:
这是否意味着my-view1
没有发生渲染?
答案 0 :(得分:0)
您需要将my-view1导入long-calendar-app.html。
即。 <link rel="import" href="../my-view1/my-view-1.html">