JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<foo-bar></foo-bar>

JavaScript

export class FooBar extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: "open" });

    const style = document.createElement("style");

    style.textContent = `
      :host {
        display: flex;
        flex-wrap: nowrap;
      }

      #name:before {
        content: ',';
      }

      #type:before {
        content: ':'
      }

    `;

    shadow.appendChild(style);
    const el = document.createElement('div');
    el.id = 'foobar';
    shadow.appendChild(el);
  }

  
}

customElements.define("foo-bar",FooBar);