保留影子 Dom 主机内容

Preserving Shadow Dom host content

本文关键字：主机 Dom 影子 保留      更新时间：2023-09-26

我正在DOM元素/主机上创建一个ShadowDom。我可以使用 select 属性保留（仍然可见）相应的主机子元素，但是主机内部的文本 childNode 未被选中，并且在那里仍然不可见。

除了在子元素上使用 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/

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

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

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

相关文章：