Shadow DOM Example

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="container"></div>
    <h1>DOM element</h1>
	  <script src="script.js"></script>
  </body>

</html>

(function (){
var root = container.attachShadow( { mode: "open" } )

//Inside element
var h1 = document.createElement( "h1" )
h1.textContent = "Inside Shadow DOM"
h1.id = "inside"
root.appendChild( h1 )

//Access inside element
console.log( container.shadowRoot.querySelector( "#inside" ) )
})()

h1 {
  background-color: red;
}