JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<my-component>ChildElement</my-component>

CSS

.classy {
  padding: 8px;
  border: solid 1px grey;
}

JavaScript

console.log('starty')

function FunctionElement () {
	const customElementReflection = Reflect.construct(HTMLElement, [], FunctionElement);
  return customElementReflection;
}

FunctionElement.prototype = Object.create(HTMLElement.prototype);
FunctionElement.prototype.constructor = FunctionElement;
FunctionElement.prototype.connectedCallback = connectedCallbackFn;

function connectedCallbackFn () {
	console.log('cc2', this);
  this.preserved = cloneDOM(this);
  console.log('preserved', this.preserved);
  this.innerHTML = `<div class='classy'>${this.preserved}</div>`;
  
}

const cloneDOM = (element) => {
	return element.innerHTML;
};

customElements.define('my-component', FunctionElement);