Shadow Dom Example

by Pritam Bohra

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Shadow Dom</title>
		<style>
			
		</style>
	</head>
	<body>

		<div class="container">
			<p class="red-fruit">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi accusamus, similique error in earum quae quod, et sint quam facere, expedita eum odio, facilis nesciunt. Assumenda dolor sapiente qui voluptates magnam porro ea dolorem non at! Quod aliquam architecto nemo, hic, veniam excepturi. Veritatis, sapiente quaerat expedita! Fugiat, cumque, est.</p>

			<div class="apple">This is a red apple</div>

			<p class="red-fruit">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi accusamus, similique error in earum quae quod, et sint quam facere, expedita eum odio, facilis nesciunt. Assumenda dolor sapiente qui voluptates magnam porro ea dolorem non at! Quod aliquam architecto nemo, hic, veniam excepturi. Veritatis, sapiente quaerat expedita! Fugiat, cumque, est.</p>
		</div>
	</body>
</html>

CSS

.red-fruit {
  color: #ff0000;
  border: 1px solid #000;
}

.container {
  background-color: #ff00ff;
  font-size: 2rem;
  color: #00ff00;
  font-weight: bold;
}

.container::after {
  content: " => after content";
}

JavaScript

shadowHost = document.querySelector(".apple");
shadowRoot = shadowHost.createShadowRoot();

newElement = document.createElement("p");
newElementText = document.createTextNode("This text is a part of shadow root");

newElement.appendChild(newElementText);
newElement.className = "red-fruit";
newElement.style.backgroundColor = "#fff";
shadowRoot.appendChild(newElement);