保留Shadow Dom主机内容

Question

I am creating a ShadowDom on a DOM element/host. I can preserve, still be visible, the respective host childElements by using the select attribute, however the text childNode that is inside the host is not selected and there for remains invisible.

Can you preserve the content of a ShadowDom host besides using the select attribute on childElements?

Here is my code:

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

Answer 1

I got it. If anyone needs this:

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

Much simpler then I thought: http://jsfiddle.net/JgfKz/4/