JSFiddle - React, Tailwind, and code Playground

by Viktor L

HTML

<x-test></x-test>

CSS

x-test::part(some-box) { 
  color: red
}

JavaScript

class XTest extends HTMLElement {
  constructor() {
    super()
    const template = Object.assign(document.createElement('template'), {
      innerHTML: `
      <div>
      	<p part="some-box">foo text</p>
        <p class="bar">bar text</p>
      </div>
    `,
    });
    /* if (self.ShadyCSS) {
      self.ShadyCSS.prepareTemplate(template, 'XTest');
    } */
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(document.importNode(template.content, true));	
  }
}

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