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.
