JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<template id="stoco-developer-template">
  <style>
    :host {
      color: red
    }
    h1 {
      font-size: 14pt; 
    }
  </style>
  <div>
    <h1 id="name"></h1>
  </div>
</template>

<stoco-developer name="Jeff Bazuik"></stoco-developer>

CSS

body {

}

stoco-developer {
  color: blue;
  font-size: 12pt;
}

JavaScript

customElements.define('stoco-developer', class extends HTMLElement {
  constructor() {
    super(); // always call super() first in the ctor.

    // Attach a shadow root to <fancy-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    const name = this.getAttribute('name');

    shadowRoot.appendChild(document.getElementById('stoco-developer-template').content)
    shadowRoot.getElementById('name').innerHTML = name;
  }
});