<div id="shadowRoot"></div>
<p>Light DOM</p>
p {
  color: blue !important;
}

const elemnt = document.getElementById("shadowRoot");
const shadowRoot = elemnt.attachShadow({ mode: "closed" });
shadowRoot.innerHTML = `
  <style>
    p {
      color: red;
      text-transform: uppercase;
    }
  </style>
  <p>Shadow DOM</p>
`;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.