JSFiddle - React, Tailwind, and code Playground

by YangHax

HTML

<the-ivan></the-ivan>
<the-ivan class="red"></the-ivan>
<the-rob></the-rob>

CSS

.red {
  background: red;
}

JavaScript

globalVar = 1;

class Ivan extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
    	<p class="red">Ivan ${globalVar++}</p>
      <style>.red { background: blue; }</style>
    `;
  }
}

customElements.define('the-ivan', Ivan);

class Rob extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
    	<p class="red">Rob ${globalVar++}</p>
      <style>.red { background: green; }</style>
    `;
  }
}

customElements.define('the-rob', Rob);