JSFiddle - React, Tailwind, and code Playground

by VKorneva

HTML

<x-test></x-test>

CSS

@host .foo {
  color: red;
}

JavaScript

class XTest extends HTMLElement {
  constructor() {
    super()
    
    this.attachShadow({mode: 'open'}).innerHTML = `
    	<div>
      	<p class="foo">foo text</p>
        <p class="bar">bar text</p>
      </div>
    `;
  }
}

customElements.define('x-test', XTest)