<button type="button" id="ativar-shadow-dom">
	Ativar shadow DOM!
</button>
<strong>Texto fora</strong>
<div id="ninja">
	<strong>Texto que não vai ser exibido</strong>
</div>

button {
	background-color: #e00;
	color: #ff0;
	padding: 1em;
	font: inherit;
	border: none;
	border-radius: 5px;
}
button:hover {
	background-color: #f55;
}
button:active {
	box-shadow: inset 1px 1px 3px black;
	outline-color: #ff0;
	text-shadow: -1px -1px black;
	color: red;
	background-color: #ff6;
}
strong {
	color: red;
	background-color: yellow;
	display: block;
	margin: .5em 0;
	font-size: 2em;
}

var btn = document.getElementById('ativar-shadow-dom');
btn.addEventListener('click', function() {
	var root = ninja.createShadowRoot();

	var strong = document.createElement('strong');
	var outroBtn = document.createElement('button');
	var bootstrap = document.createElement('style');

	bootstrap.innerHTML = '@import url(bootstrap.css);';
	strong.textContent = 'Texto negrito normal';
	outroBtn.className = 'btn btn-primary';
	outroBtn.textContent = 'Botão do shadow root';

	root.appendChild(bootstrap);
	root.appendChild(strong);
	root.appendChild(outroBtn);
});