Edit in JSFiddle

var ShadowHost = document.getElementById('HostDiv');
if (ShadowHost.shadowRoot == null) // See if the element has a shadow root?
{
	var ShadowRoot = ShadowHost.attachShadow({mode: 'closed'});
 	// Get the template
 	var tmpl = document.querySelector('template');
 	ShadowRoot.appendChild(document.importNode(tmpl.content, true));
}

<template>
 <style>
  h3 {
   color: darkblue;
   border:2px solid gray;
   box-shadow: 10px 10px 5px #0f0f0f;
   width:50%;
   margin-left:20px;
   padding-left:10px;
  }
 </style>
 <h3>[From the ShadowRoot...]</h3>
</template>

<div id='HostDiv'>

</div>

<h3>Some regular h3... </h3>