Shadow-root Sibling Elements Disappear On AttachShadow() Call

When I call host.attachShadow({mode: 'open'}) on a div containing a few elements inside, the contents of the div seemingly disappears. The elements are still visible from devtools

Solution 1:

The Shadow DOM content will replace the original DOM subtree of the host where it (the shadow root) is attached. That's the expected behaviour of a Shadow DOM (hence this name).

You can make it appear by using the element in the Shadow DOM.

host.attachShadow( { mode: 'open' } )
    .innerHTML = 'Original DOM: <slot></slot>, in the Shadow DOM'

<div id=host>
Lite DOM
</div>

You should read the tutorial about Shadow DOM for further details.