JSFiddle - React, Tailwind, and code Playground

by Alexander Maslakov

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="addElementButton">
  Add element
</button>

JavaScript

// Somewhere before jQuery
class HelloWorldElement extends HTMLElement {
  static get isVoid() { return true }

	createdCallback() {
  	const content = this.innerText;
  	const shadowRoot = this.createShadowRoot();
    shadowRoot.innerHTML = `
      <p>Hello, <strong></strong> :)</p>
    `;
    shadowRoot.querySelector('strong').innerText = content;
  }
}
document.registerElement('hello-world', HelloWorldElement);


// Somewhere in jQuery
$('#addElementButton').on('click', function() {
	$('body').append('<hello-world>' + Math.random() + '</hello-world>');
});