附加影子 DOM 时如何保留原始 DOM 子级？

Question

I have a root div element with two children:

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

I attach a shadow DOM to root and append another child to the shadow DOM. I would expect to see all three children:

ShadowChild
FirstChild
SecondChild

or

FirstChild
SecondChild
ShadowChild

However, attaching the shadow seems to hide the original children of the root div :

 ShadowChild

=>How can I keep/show the original children?

The following code example might require Chrome browser to support the method 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>

Edit

Here it says

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.

=>How can I do so for a custom html element?

My use case is a custom tab folder that I want to use like

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

I create headers for the tabs in a shadow dom of treez-tab-folder , using the title attribute. The creation of the headers works, but the tabs can not be seen any more. I could copy the original treez-tab children to the shadow DOM. But what if another tab is dynamically added to the tab folder later?

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

As already stated I would like to enable the rendering of the original children or automatically "redirect/proxy" the original children to the shadow DOM.

Related question, including the tab folder example without a shadow dom:

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

Not using a shadow DOM would have the drawback that the original treez-tab-folder includes additional DOM elements, possibly causing issues (eg with vue.js).

Answer 1

For anyone wondering today: was answered here .
Basically, a <slot> element to the 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>