<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body unresolved>
<dom-module id="my-element">
<template>
<fieldset>
<h1> Hello
<input />
</h1>
<template is="dom-repeat" items="{{messages}}">
<div># <span>{{index}}</span></div>
<div>Message: <span>{{item}}</span></div>
</template>
<span id="span">{{message}}</span>
</fieldset>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: "my-element",
properties:{
messages:{
type: Object,
value : function(){return [];}
}
},
ready: function(){
this.messages = ["Click the input to get focus"];
this.employees = [
{first: 'Bob', last: 'Smith'},
{first: 'Sally', last: 'Johnson'}
]
},
attached: function () {
this.addEventListener('focus', this._onFocus.bind(this), true);
},
_onFocus: function(){
var myTime = new Date().toJSON().slice(11,19);
this.push('messages', myTime + ": Element has been focused");
console.log("elementhas been focused");
}
});
});
</script>
</dom-module>
<my-element></my-element>
<hr />
And now a input out of template
<input />
</body>
</html>
// Code goes here
/* Styles go here */