JSFiddle - React, Tailwind, and code Playground

HTML

<template id="shadowtree">
  <ul controls style="width:640px;height:360px;">
      <content></content>
  </ul>
</template>
<custom-list id="host">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</custom-list>

JavaScript

var CustomList = Object.create(HTMLElement.prototype);
CustomList.createdCallback = function() {
    var shadowRoot = host.createShadowRoot();
    var clone = document.importNode(shadowtree.content, true);
    shadowRoot.appendChild(clone);
};

var CList = document.registerElement('custom-list', {
  prototype: CustomList
});