JSFiddle - React, Tailwind, and code Playground

by Pillagerplayz

HTML

<bubble>Bubble</bubble>
<template id="doc.bubble.main">
  <input id="bub.input" readonly value="">
</template>

JavaScript

class Bubble extends HTMLElement {
    constructor() {
        super();
        let shadow = this.attachShadow({mode: "closed"});
        let BUBBLE_MAIN = document.getElementById("doc.bubble.main");
        shadow.appendChild(template.content.cloneNode(true))
        document.getElementById("bub.input").setAttribute("value", document.querySelector("bubble").textContent);
    }
}
customElements.define("bubble", Bubble);