How to create shadow root inside a shadow root

Question

I know this is easy using polymer but I want to do this using JavaScript

Shadow root > Shadow root > shadow root

Answer 1

Use the same principle used to build a single shadow root to build a nested shadow-root:

<div id="shadow-host">
</div>
<script>
    var shadow = document.querySelector('#shadow-host').attachShadow({mode: 'open'});
    shadow.innerHTML = '<div id=shadow-content><p>Shadow Root</p><div id="nested-shadow-host"></div></div>';
    var nestedShadow = shadow.querySelector('#nested-shadow-host').attachShadow({mode: 'open'});
    nestedShadow.innerHTML = '<div id="nested-shadow-content"><p>Nested Shadow Root</p></div>';
</script>