如何在附加阴影DOM时保留原始DOM子项？

Question

我有一个带有两个孩子的根div元素：

<div id = "root">
  <div id="firstChild">FirstChild</div>
  <div id="secondChild">SecondChild</div>
</div>

我将shadow DOM附加到root并将另一个子项附加到影子DOM。我希望看到所有三个孩子：

ShadowChild
FirstChild
SecondChild

或

FirstChild
SecondChild
ShadowChild

但是，附加阴影似乎隐藏了根div的原始子项：

 ShadowChild

=＆gt;我如何保留/展示原始儿童？

以下代码示例可能需要Chrome浏览器支持方法attachShadow：

var root = document.getElementById('root')
var shadowRoot = root.attachShadow({mode: 'open'});
var shadowChild = document.createElement('div');
shadowChild.innerText ='ShadowChild';
shadowRoot.appendChild(shadowChild);

<div id = "root">
  <div id="firstChild">FirstChild</div>
  <div id="secondChild">SecondChild</div>
</div>

修改的

Here它说

  

虽然影子主机的子节点不能正常生成方框，但可以将它们明确地拉入影子树并强制正常渲染。这是通过将元素分配给分发列表来完成的。具有分发列表的元素是插入点。

=＆gt;我如何为自定义html元素执行此操作？

我的用例是我想要使用的自定义标签文件夹，如

<treez-tab-folder id="root">
   <treez-tab title="First tab">
        <div id='firstContent'>First tab content</div>
    </treez-tab>

    <treez-tab title="Second tab">
        <div>Second tab content</div>
    </treez-tab>
</treez-tab-folder>

我使用title属性为treez-tab-folder的影子dom中的标签创建标题。标题的创建有效，但标签不再可见。我可以将原始treez-tab个孩子复制到影子DOM。但是，如果稍后将另一个选项卡动态添加到选项卡文件夹呢？

d3.select("#root").append('treez-tab'); 

如前所述，我想启用原始子项的呈现或自动将原始子项“重定向/委托”到shadow DOM。

相关问题，包括没有阴影dom的标签文件夹示例：

How to target custom element (native web component) in vue.js?

不使用影子DOM会有原始treez-tab-folder包含其他DOM元素的缺点，可能会导致问题（例如使用vue.js）。

Answer 1

对于今天想知道的任何人：已回答 here。
基本上，一个 <slot> 元素到 shadow DOM。

var root = document.getElementById('root')
var shadowRoot = root.attachShadow({mode: 'open'});

var wrapper = document.createElement('slot');
shadowRoot.appendChild(wrapper);

var shadowChild = document.createElement('div');
shadowChild.innerText ='ShadowChild';
shadowRoot.appendChild(shadowChild);

<div id="root">
  <div id="firstChild">FirstChild</div>
  <div id="secondChild">SecondChild</div>
</div>