JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="http://www.polymer-project.org/platform.js?20140312"></script>
<script src="http://www.polymer-project.org/polymer.js?20140312"></script>
<polymer-element name="k-set" attributes="property value target">
    <script>
        (function() {
            function scope(target) {
                return target.kattributes || (target.kattributes = {})
            }

            function set() {
                var property = this.getAttribute('property') || null,
                    value = this.getAttribute('value') || '',
                    target = this.getAttribute('target') || 'Polymer'
                    // target : parent | global | Polymer (defaults to Polymer)
                if (property !== null) {
                    switch (target) {
                        case 'parent':
                            target = scope(this.parentNode)
                            break;
                        case 'global':
                            target = scope(new Function('return this')())
                            break;
                        case 'Polymer':
                            target = scope(Polymer)
                            break;
                        default:
                            target = null;
                            break;
                    }
                    if (target) {
                        target[property] = value
                    }
                }
            }

            Polymer('k-set', {
                attributeChanged: function(attrName, oldVal, newVal) {
                    set.call(this)
                },
                ready: function() {
                    set.call(this)
                }
            })
        })()
    </script>
</polymer-element>
<k-set property="author" value="twitter.com/@kentaromiura"></k-set>
<k-set property="author" value="Cristian Carlesso" target=global></k-set>
<div id="foo">
    <k-set property="author" id=test target=parent value="kentaromiura"></k-set>
</div>

JavaScript

function start() {
    alert(Polymer.kattributes.author)
    alert(document.getElementById('foo').kattributes.author)
    alert(window.kattributes.author)
}

window.addEventListener('polymer-ready', function (e) {
    start()
    document.getElementById('test').setAttribute('value', 'github.com/kentaromiura')
    alert(document.getElementById('foo').kattributes.author)
});