JSFiddle - React, Tailwind, and code Playground

by Jitendra Zaa

HTML

<div style="height:300px;">
  <h1>Shadow DOM example in HTML</h1>

  <p>
    I'm paragraph outside Shadow DOM and my style / color is not impacted by Shdow DOM.
  </p>
  <movie-card name="Lord of the Rings" detail="I'm paragraph inside Shadow DOM with separate style">
  </movie-card> 
</div> 
<style>
  p {
    color: #FF0000;
  }

</style>

JavaScript

class DemoCustomElement extends HTMLElement {
   constructor() {
     super();
     let innerHTML = `
                  <h1>${this.name} </h1>
                  <p> ${this.detail}  </p>
                  <style>
                  p{
                  color :#0000FF;
                  }
                  </style>
                            `;

     let shadowRoot = this.attachShadow({
       mode: 'open'
     });
     shadowRoot.innerHTML = innerHTML;
   }

   set name(val) {
     this.setAttribute("name", val);
   }

   get name() {
     return this.getAttribute('name');
   }

   set detail(val) {
     this.setAttribute("detail", val);
   }

   get detail() {
     return this.getAttribute('detail');
   }

 }

 window.customElements.define('movie-card', DemoCustomElement);