{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 疯言疯语 的问题《Only first local DOM element showing with Polymer》','https://www.manongdao.com/q-1105634.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I've been toying with Polymer 1.0 a bit and have this basic HTML file:
<head>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
</script>
</head>
<body>
<dom-module id="photo-view">
<template>
<p>Photo <span>{{basePic}}</span> goes here with filters
[<span>{{filters}}</span>]</p>
</template>
<script>
var PhotoView = Polymer({
is: 'photo-view',
properties: {
basePic: String,
filters: { type: Array, value: function() { return []; } }
}
});
</script>
</dom-module>
<dom-module id="photo-open">
<template>
<button>Click me to open a photo!</button>
</template>
<script>
var PhotoOpen = Polymer({
is: 'photo-open',
properties: {
picture: { type: String, notify: true }
}
});
</script>
</dom-module>
<dom-module id="photo-editor">
<template>
<photo-view base-pic="{{picture}}"/>
<photo-open picture="{{picture}}"/>
</template>
<script>
var PhotoEditor = Polymer({
is: 'photo-editor',
properties: {
picture: { type: String, value: 'xyz.jpg' }
}
});
</script>
</dom-module>
<photo-editor/>
</body>
Now, I'd expect this to show the words Photo xyz.jpg goes here with filters [], followed by the button that says Click me to open a photo!. Only issue is, only the first local DOM element in photo-editor shows! For instance, right now, only the photo-view part shows. If I put the photo-open above photo-view like:
<dom-module id="photo-editor">
<template>
<!-- Swapped order here -->
<photo-open picture="{{picture}}"/>
<photo-view base-pic="{{picture}}"/>
</template>
<script>
...
then only the button shows, but not the text. What am I doing wrong? I've been looking over the docs, and I can't see any obvious issues. There are no errors in the Chrome devtools, either.
Custom elements must have a closing tag.
This is the reason why you are getting unexpected results in your code.