JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<div id="test">
  <notification-preview>
    <!-- A email body with styles is entered below. -->
    <!-- We need to diplay the email body but prevent styles from being applied globally -->
    <p>
      Hello'; alert('test');
    </p>
    <style>
    * {
      color: red;
    }

      .hackme {
        visibility: visible;
      }
      .hackme:after {
        content: "root";
        position: absolute;
        left: 10px;
        
        color: cyan;
        background-color: black;
      
      }
    </style>
    
  </notification-preview>
</div>
<div class="console">
  <div class="hackme">user@localhost$<span class="blink_me">_</span></div>
</div>

CSS

.bordered {
  border: 2px dashed red;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#test {
  border-top: 1px solid lime;
  border-bottom: 1px solid lime;
  margin-top: 16px;
  margin-bottom: 16px;
}

html, body {
  height: 100vh;
  background: #000;
  margin-right: 5px;
  color: lime;
  font-weight: bold;
  font-size: 16px;
  font-family: "Courier New",monospace,serif;
}

JavaScript

class HtmlNotificationPreview extends HTMLElement {
		    constructor() {
		        super();
            
		        const shadow = this.attachShadow({ mode: 'open' });

						var unsafeHtml = this.innerHTML;
            this.innerHTML = '';
		        // Inject the embedded HTML and CSS
		        shadow.innerHTML = unsafeHtml;
            console.log(this.unsafeHtml);
		    }
		}
		
		customElements.define('notification-preview', HtmlNotificationPreview);