JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://rawgithub.com/Polymer/polymer/master/polymer.html">
    
<polymer-element name="my-list">
<template>
    <ul id="container">
    </ul>
</template>
<script>
Polymer('my-list', {
    attached: function gridAttached(){
        //ensure any element upgrades have been processed
        this.async(function asyncAttached(){
            var list = this.$.container;
            var frag = document.createDocumentFragment();
            this.children.array().forEach(function(child, childNo){
                var li = document.createElement("LI");

                li.innerHTML = 'content: <content select=":nth-child('+(childNo+1)+')"></content>';
                frag.appendChild(li);
            });
            list.appendChild( frag );
        });
    }
});
</script>
</polymer-element>
    
<my-list>
    <span>First child</span>
    <a>Second child</a>
</my-list>
<hr/>
Desired rendered DOM:
<ul>
    <li><span>First child</span></li>
    <li><a>Second child</a></li>
</ul>