JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html>
        <head>
            <script>
              
            </script>
        </head>
        <body >
            <my-element  style="display:block;width:100px;height:100px;background:#ff0000"></my-element>
        </body>
    </html>

JavaScript

// extend HTMLELEMENT instead of div
//https://developers.google.com/web/fundamentals/web-components/customelements


class MyElement extends HTMLElement  {
                    constructor(){
                        super();
                        this.style.background = "#00ff00";
                        console.log("Created custom element!");
                    }
 }
 function addCustomElement(){
                    customElements.define("my-element",  MyElement)	
                   
                    console.log("Added MyElement to custom element registry!");
}
                   
      // add call here, because onload did not work for me
      addCustomElement()