Estoy tratando de crear un shadowDOM como el siguiente, pero está bloqueando toda la página y mostrando el shadowDOM:

 var host = document.activeElement; var root = host.attachShadow({mode: 'open'}); var div = document.createElement('div'); div.className = 'div'; div.innerHTML = '<style>.div{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);}</style>this is shadow dom'; root.appendChild(div);

¿Cómo crear un shadowDOM que aparece debajo del elemento HTML actual?