JSFiddle - React, Tailwind, and code Playground

by gol ngaz²

HTML

<my-test>fef</my-test>

CSS

body {
  --perso: red;
}

JavaScript

const template = document.createElement('template')

class Test extends HTMLElement {
    constructor() {
    	super()
  		template.innerHTML = `
            <style>
               span {
               		color: var(--perso)
               }
            </style>
            <span>Hello component</span>
`
            this._root = this.attachShadow({mode: 'open'});
            this._root.appendChild(template.content.cloneNode(true));
  }
}

window.customElements.define('my-test', Test);