JSFiddle - React, Tailwind, and code Playground

by Mrityunjay Kumar

HTML

<template id="myNameTemplate">
  <style>
    div { color: orange; font-size: 40px; }
  </style>
  <div>
      My name is <span id="name"></span>
  </div>
</template>
<my-name> Peter </my-name>
<my-name> John </my-name>
<my-name> Trisha </my-name>

JavaScript

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

myNameProto.createdCallback = function() {
   var content = document.querySelector('#myNameTemplate').content;
   content.querySelector('#name').innerHTML = this.innerHTML;
   this.createShadowRoot().appendChild(document.importNode(content, true));
};

var myName = document.registerElement('my-name', {prototype: myNameProto});