JSFiddle - React, Tailwind, and code Playground

by PavelKozlov

HTML

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>

<!-- Works only on browsers that support Javascript modules like Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
  import {LitElement, html, css} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

  class MyElement extends LitElement {
  
	  static get properties() {
    	return {
      	shown: Boolean,
      }
    }

		static get styles() {
    	return [css`
      	.colored {
        	color: green;
        }
      `];
    }
    
		connectedCallback() {
    	super.connectedCallback && super.connectedCallback();
      
      if (!this.shown) {
        setTimeout(() => {
          this.shown = true;
          this.requestUpdate();
        }, 1000);
      }
    }

    render() {
      return this.shown ? 
      	html`<span class="colored">Green</span>` :
        undefined
    }  
  }
	
  customElements.define('my-element', MyElement);
</script>

<my-element shown="true"></my-element>
<my-element></my-element>