JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<span>I'm not in the shadow DOM</span>
<div id="host"></div>

CSS

span {
  background: red
}

JavaScript

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);