如何在附加阴影DOM时保持原始DOMchildren？

Question

我有一个根 div 元素有两个 children:

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

我将 shadow DOM 附加到 root 并将另一个 child 附加到阴影 DOM。我希望看到所有三个 children:

ShadowChild
FirstChild
SecondChild

或

FirstChild
SecondChild
ShadowChild

不过附上影子好像隐藏了根的原children div:

 ShadowChild

=>我怎样才能keep/show原child仁?

以下代码示例可能需要 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 它说

While the children of a shadow host do not generate boxes normally, they can be explicitly pulled into a shadow tree and forced to render normally. This is done by assigning the elements to a distribution list. An element with a distribution list is an insertion point.

=>如何为自定义 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 中的选项卡创建 headers。 headers 的创建有效，但无法再看到选项卡。我可以把原来的treez-tabchildren复制到影子DOM。但是，如果稍后将另一个选项卡动态添加到选项卡文件夹中怎么办？

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

如前所述，我想启用原始 children 的渲染或自动 "redirect/proxy" 将原始 children 渲染到阴影 DOM。

相关问题，包括没有阴影的选项卡文件夹示例dom：

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

Answer 1

对于今天想知道的人：已回答 here。
基本上，一个 <slot> 元素到影子 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>

如何在附加阴影DOM时保持原始DOMchildren？

How to keep original DOM children when attaching a shadow DOM?

html

javascript

shadow-dom