<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<dom-module id="my-element">
    <template>
        <div on-click="changeBgColor">
            <dom-repeat items="[[data]]">
                <template>
                    <div index$="[[index]]" style$="background: [[item.background]]; width:200px; height:200px; border:1px solid gray;">[[item.background]]</div>
                </template>
            </dom-repeat>
        </div>

    </template>
    <script>
        class MyElement extends Polymer.Element{
            static get is () { return "my-element"; }

            static get properties(){
                return{
                    data: {
                        type: Array,
                        value: [
                            {background: '#00ff00'},
                            {background: '#00ff00'},
                            {background: '#00ff00'}
                        ],
                        reflectToAttribute: true
                    }
                }
            }
            changeBgColor(e){
                let index = e.target.getAttribute('index');
                if(index !== undefined){
                    let arr = [];
                    this.data.forEach( (v, i) => {
                        if(i == index) arr.push({background: "#ff0000"});
                        else arr.push({background: "#00ff00"});
                    });
                    this.data = arr;
                }else{
                    return;
                }
            }
        }
        customElements.define( MyElement.is, MyElement);
    </script>
</dom-module>
<my-element></my-element>