JSFiddle - React, Tailwind, and code Playground

by graphettion

CSS

fancy-tabs .tabs {
  color: red;
}

fancy-tabs .panels {
  color: red;
}

JavaScript

customElements.define('fancy-tabs', 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'});
    shadowRoot.innerHTML = `
    	<!-- styles are scoped to fancy-tabs! -->
      <style>.tabs { color: green; } .panels { color: blue; }</style>
      <div class="tabs">can't touch this</div>
    `;
    
  }
}), document.body.innerHTML = `<fancy-tabs></fancy-tabs>`;