JSFiddle - React, Tailwind, and code Playground

HTML

<jrg-test>
  <div slot="test">
  This should work
  </div>
</jrg-test>

JavaScript

class TestElement extends HTMLElement{
  constructor(){
  	super();
    console.log("Attaching the shadow");
    this.attachShadow({mode:'open'});
  }
	connectedCallback() {
  	console.log("Ok we are working")
    this.shadowRoot.innerHTML = "<slot name='test'></slot>"
    const element = document.createElement('style');
    element.textContent = "::slotted(*){background-color:red;color:white;}";
    this.shadowRoot.appendChild(element);
  }
}
customElements.get("jrg-test") ||
        customElements.define("jrg-test", TestElement);