JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- elements outside shadow dom -->
<div id="container">
  <h1>44sdfgfg dfgsdf gsfd</h1>
  <h1 id="shadow-dom-host"></h1>
</div>

<textarea class="form-control" id="css-output"> 
:host(h2) {
  color: red;
}

:host(#shadow-dom-host) {
  border: 2px dashed red;
}
</textarea>

JavaScript

const shadowDom = init();

// add a <span> element in the shadow DOM
const span = document.createElement("h2");
span.textContent = "Inside shadow DOM2";
shadowDom.appendChild(span);

// attach shadow DOM to the #shadow-dom-host element
function init() {
  const host = document.getElementById("shadow-dom-host");
  const shadowDom = host.attachShadow({ mode: "open" });

  const cssTab = document.querySelector("#css-output");
  const shadowStyle = document.createElement("style");
  shadowStyle.textContent = cssTab.textContent;
  shadowDom.appendChild(shadowStyle);

  cssTab.addEventListener("change", () => {
    shadowStyle.textContent = cssTab.textContent;
  });
  return shadowDom;
}