JSFiddle - React, Tailwind, and code Playground

by Aggre _--

HTML

<my-app></my-app>

CSS

:root /deep/ * {
  font-style: italic;
}

:root /deep/ button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

JavaScript

class MyApp extends HTMLElement {
	connectedCallback() {
  	this.attachShadow({mode: 'open'})
    this.shadowRoot.innerHTML = `
    <style>
    	button {
      	color: blue;
      }
    </style>
    <button>Click</button>
    <p>Paragraph</p>
    `
	}
}

window.customElements.define('my-app', MyApp)