<!DOCTYPE html>
<html>
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="host-element.html">
</head>
<body>
<host-element></host-element>
</body>
</html>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<link rel="import" href="child-element.html">
<dom-module id="host-element">
<template>
<child-element my-prop="{{hostProp}}"></child-element>
<p>
Current value: <span>{{hostProp}}</span>
</p>
</template>
<script>
Polymer({
is: "host-element",
properties: {
hostProp: String
}
});
</script>
</dom-module>
<dom-module id="child-element">
<template>
<button on-click="onClickHandler">Change value</button>
</template>
<script>
Polymer({
is: "child-element",
properties: {
myProp: {
type: String,
notify: true,
readOnly: true,
value: 'Initial value'
}
},
onClickHandler: function(){
this._setMyProp('New value after you click the button.');
}
});
</script>
</dom-module>