JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="super-list">
    <script>
        Polymer('super-list', {
            color: "red",
            ready: function() {
                console.info("Super-list created!");
                this.children[0].style.color = this.color;
            }
        });
    </script>
</polymer-element>
<super-list>
    <li>one</li>
    <li>two</li>
</super-list>
<polymer-element name="super-div2" extends="div">
    <script>
        (function() {
            var superListProto = Polymer.getRegisteredPrototype("super-list");

            var superBodyProto = Object.create(superListProto);
            superBodyProto.color = "blue";
            /* superBodyProto.createdCallback = function() {
            console.info("Super-div created!");
            return this.ready();
        };
        superBodyProto.readyCallback = superBodyProto.createdCallback; //required for compatibility with polymer.js < 20130816

        document.register('super-div2', {
            extends: "div",
            prototype: superBodyProto
    });*/
debugger;
            Polymer('super-div2', superBodyProto);
        }());
    </script>
</polymer-element>
<hr/>
<div is="super-div2">
    <li>three</li>
    <li>four</li>
</div>
<super-div2>
    <li>three</li>
    <li>four</li>
</super-div2>
<super-list>
    <li>one</li>
    <li>two</li>
</super-list>