Edit in JSFiddle

var test1 = document.querySelector('#test1');
var shadow = test1.createShadowRoot();
<div id="test1">test1</div>
<div id="test2">test2</div>
div {
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 5px dashed #f0f;
    margin: 5px;
}