CODEWITHSUNDEEP
polymershadow-dom
soconfusing
soconfusing

Reputation: 69

How to create shadow root inside a shadow root

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

Shadow root > Shadow root > shadow root

Upvotes: 2

Views: 1966

Answers (2)

Haphil
Haphil

Reputation: 1250

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>

Example Nested Shadow Root

Upvotes: 1

ebidel
ebidel

Reputation: 24119

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-shadow-multiple discusses multiple shadow roots.

<div id="example1">Light DOM</div>
<script>
  var container = document.querySelector('#example1');
  var root1 = container.createShadowRoot();
  var root2 = container.createShadowRoot();
  root1.innerHTML = '<div>Root 1 FTW</div>';
  root2.innerHTML = '<div>Root 2 FTW</div>';
</script>

Upvotes: 1

Related Questions