Shadow Dom

by Pritam Bohra

HTML

<h1>My First Heading</h1>
<p class="heading">Yo Yo</p>

CSS

.heading {
  color: dodgerBlue;
  font-size: 2rem;
}

.heading::after {
  content: " =>AFTER";
}

JavaScript

let firstHeading = document.querySelector("h1");
let shadowDom = firstHeading.createShadowRoot();

let newH1 = document.createElement("h1");
newH1.textContent = "Shadow Root";
newH1.className = "heading";
newH1.style.color = "#a1a";
shadowDom.appendChild(newH1);