如何在影子根中创建影子根答案

【问题标题】：How to create shadow root inside a shadow root如何在影子根中创建影子根
【发布时间】：2014-11-09 08:12:36
【问题描述】：

我知道使用聚合物很容易，但我想使用 JavaScript 来做到这一点

影根>影根>影根

【问题讨论】：

【解决方案1】：

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-shadow-multiple 讨论了多个影子根。

<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>

【讨论】：

但是嵌套呢？
主机节点可以托管多个影子根。实际上并没有“嵌套”的概念。你想做什么，也许我可以帮忙解释一下。举个例子会有所帮助。
你必须有阴影 -> 元素 -> 阴影 -> 元素 -> 阴影。 IOW，阴影不能承载阴影，但它可以承载带有阴影的元素。
@ebdel：Scott Miles 接近我所寻求的答案。影子根可以托管另一个影子根还是应该像这样？ Shadow Root Root 2 Host2> Host> 应该更像Shadow > element > shadow > element 吧？而不是Shadow>Shadow>Shadow？
一个元素需要托管一个影子根。在jsbin.com/zixakotiwepa/1/edit 中可以更好地看到我的示例。它表明 Polymer 在扩展元素时使用了多个阴影根。如果您检查 devtools 中的元素，您会看到 polymer-cooler 有 2 个#shadow-roots。扩展对象和扩展对象都有自己的影子根。

【解决方案2】：

使用与构建单个影子根相同的原理来构建嵌套的影子根：

<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>

【讨论】：