shadowDom.js

if (document.head.createShadowRoot || document.head.attachShadow) {
  const shadow = document.querySelector("#webcomponents").attachShadow({
    // (1)
    mode: "open"(2)
  });

  shadow.innerHTML = "<p>HTML Template</p>"; // (2)
  shadow.innerHTML += "<p>HTML Import</p>";
  shadow.innerHTML += "<p>Shadow DOM</p>";
  shadow.innerHTML += "<p>Custom Elements</p>";
  shadow.innerHTML += ` (4)
    <style>
      p{
        color: red;
      }
    </style>
   `;
}