<dom-module id="betterSelect-element">
    <style>
        :host {
            border: 10px solid orange;
            max-width: inherit;
        }
    </style>
    <template>
        <template is="dom-repeat" items="{{options_}}">
            <option>{{item}}</option>
        </template>
    </template>
</dom-module>
<script>
"use strict";
    var BetterSelect = new Polymer({
        is: "betterSelect-element",
        extends: "select",

        properties: {
            options_: Array,
            selectedValue: String,
        },

        listeners: {
            'change': 'onChange'
        },

        /** Options is a reserved HtmlOptionsCollection */
        factoryImpl: function(options_, selectedValue) { // label?
            this.options_ = options_;
            this.selectedValue = selectedValue;
            // TODO
        },
        // Das selectbox Verhalten setzt den Wert auf das erste Option das kommt, sprich das muss korrigiert werden.
        attached: function() {
            this.async(function() {
                if(this.value === "") { // delay further, looks like bad style
                    this.async(function() {
                        this.value = this.selectedValue;
                    });
                } else {
                    this.value = this.selectedValue;
                }
            });
        },

        onChange: function() {
            this.fire('value-changed', {value: this.value});
        }
    });
</script>