reverse-element.html

<link rel="import" href="../polymer/polymer.html">

<!--
`reverse-element`
Reverses children elements based on property - helpful for accessibility

@demo demo/index.html 
-->

<dom-module id="reverse-element">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <slot></slot>
    </template>

    <script>
        Polymer({

            is: 'reverse-element',

            properties: {
                /**
                 *  Determines whether to reverse content or not
                 */
                reverse: {
                    type: Boolean,
                    value: false,
                    observer: "_reverse"
                },
            },
            _reverse: function (newVal, oldVal) {
                // reverse if we went from undefined to true or we changed values and the old value wasn't undefined.
                if ((newVal != oldVal && oldVal != undefined) || (newVal && oldVal==undefined) ) {
                    // loop from the bottom and remove 
                    for (var i = this.childNodes.length - 1; i >= 0; i--) {
                        this.appendChild(this.childNodes[i]);
                    }
                }
            }

        });
    </script>
</dom-module>