JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<script src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.20/webcomponents.min.js"></script>

<script>
var myElementProto = Object.create(HTMLElement.prototype);
myElementProto._isAttached = false;
myElementProto.createdCallback = function(){
  this.observer = new MutationObserver(function (mutations) {
     log('mutated');
   });
}
myElementProto.attachedCallback = function(){

  this._isAttached = true;
  this.observer.observe(this, { childList: true });
  log('attached');
}
myElementProto.detachedCallback = function(){
  this.observer.disconnect();
  this._isAttached = false;
  log('detached');
}
document.registerElement("my-element", {
  prototype: myElementProto
});
function log(msg){
document.getElementById('log').innerHTML += '<p>' + msg + '</p>';
}
</script>

<my-element id="me"><div>here I am</div></my-element>
<div id="log"></div>
<script>

setTimeout(function(){
	var myEl = document.getElementById("me");
  
  myEl.parentNode.removeChild(myEl);
  myEl.removeChild(myEl.firstChild);
  
});
</script>