Shadow DOM

by nabendu

HTML

<h3>Welcome to our Website</h3>
<div id="shadowHost">
  <span id="child">This is not rendered</span>
</div>

<template id="news-widget">
  <style>
    h3 {
      color: green;
    }
  
  </style>  
  <h3>News Widget</h3>
</template>

CSS

h3 {
      color: blue;
    }

JavaScript

let shadowHost = document.getElementById("shadowHost");
let shadowRoot = shadowHost.createShadowRoot();
let shadowChild = document.createElement("span");

shadowChild.innerHTML = document.getElementById("news-widget").innerHTML;
shadowRoot.appendChild(shadowChild);