Shadow DOM with CSS

by NesterOne

HTML

<div id="welcomeMessage">Welcome to My World</div>

JavaScript

var shadowHost = document.querySelector("#welcomeMessage");
var shadowRoot = shadowHost.createShadowRoot();
shadowRoot.innerHTML = [
    "<style>",
    " ",
    "h1 { color: red}",
    " ",
    "</style>",
    "<h1>Hello Shadow DOM World</h1>" 
].join(',').replace(/,/g,"");