JSFiddle - React, Tailwind, and code Playground

by Reshma_Yadav

HTML

<html>
</head>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-svg.min.js"></script></head>
<body>

<template id="scriptContainer">

  <!--start-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-svg.min.js">
      
    </script>
  <!--end-->

</template>
<script type="text/javascript">

customElements.define('show-hello', class extends HTMLElement {
  connectedCallback() {
	var script = document.createElement( 'script' );
    script.textContent = 'console.log( "executed" )'
	var parag = document.createElement('p');
	const shadow = this.attachShadow({mode: 'open'}).appendChild(parag).append(scriptContainer.content.cloneNode(true));;
	
    parag.innerHTML = `
	v2 example:<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mfenced><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></mfenced><mn>2</mn></msup></mrow> </math><br/> v3 example:<math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mo>[</mo><mi>K</mi><mi>r</mi><mo>]</mo><mn>5</mn><msup><mi>s</mi><mn>1</mn></msup></math>, ${this.innerHTML}
   `;
   
  }
});
</script>
<show-hello></show-hello>
v2 example:<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mfenced><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></mfenced><mn>2</mn></msup></mrow> </math><br/>
v3 example:<math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mo>[</mo><mi>K</mi><mi>r</mi><mo>]</mo><mn>5</mn><msup><mi>s</mi><mn>1</mn></msup></math>



</body>
</html>