保留 Shadow Dom 主机内容答案

【问题标题】：Preserving Shadow Dom host content保留 Shadow Dom 主机内容
【发布时间】：2013-10-02 22:58:55
【问题描述】：

我正在 DOM 元素/主机上创建 ShadowDom。通过使用 select 属性，我可以保留，仍然可见，相应的主机 childElements，但是主机内部的文本 childNode 没有被选中，并且仍然不可见。

除了在 childElements 上使用 select 属性之外，您还能保留 ShadowDom 主机的内容吗？

这是我的代码：

<div id="element">
      <div class="first">This will be displayed</div>
      This text node will be not displayed...and I want to
</div>

<template id="template">

      <div style="color: red;">
        <content select=".first"></content>
      </div>

</template>

http://jsfiddle.net/JgfKz/2/

【问题讨论】：

标签： javascript dom shadow-dom

【解决方案1】：

我明白了。如果有人需要这个：

var element = document.querySelector('#element');
var root1 = element.webkitCreateShadowRoot();
root1.innerHTML = '<div>Root extra ShadowDom content</div><content></content>';

比我想象的要简单得多： http://jsfiddle.net/JgfKz/4/

【讨论】：