JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="http://kentaromiura.github.io/custom-element/weakmap-shim.js"></script>
<script src="http://kentaromiura.github.io/custom-element/ce.js"></script>
<script src="http://kentaromiura.github.io/custom-element/custom-element.js"></script>
<custom-element name="kenta-foo" constructor="foo">
      <template>foo</template>
      <script>
        document.register.tag('kenta-foo', {
          ready: function(){
            console.log('ready', this)
          },
          created: function(){
            console.log('created', this)
          },
          toJson: function(){
            return {Timmeh:'rocks'}
          }
        })
      </script>
      <style>
      kenta-foo {
        display: block;
        color:red;
      }
      </style>
    </custom-element>

    <kenta-foo id=test></kenta-foo>
    
<script>
onload = function(){  
  console.log(document.getElementById('test').toJson())
}
</script>