JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<script src="http://www.polymer-project.org/platform.js"></script>
<script>
  (function (global) {

    var MyListPrototype = Object.create(HTMLElement.prototype);

    MyListPrototype.attachedCallback = function () {
      // debugger
      var ul = document.createElement("UL");
      for( var childNo = 1, len = this.childElementCount; childNo <= len; childNo++){
        ul.innerHTML += '<li><content select=":nth-child('+childNo+')"></content></li>';
      }
      // this.children.array().forEach(function(child, index){
      //   ul.innerHTML += '<li><content select=":nth-child('+(index+1)+')"></content></li>';
      // });
      this.createShadowRoot().appendChild(ul);
    };

    global.GravatarImgElement = document.registerElement('my-list', {
      prototype: MyListPrototype
    });
  })(window)
</script>
    
<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>