How to keep original DOM children when attaching a shadow 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 (e.g. with vue.js).

drinking-code drinking-code · Accepted Answer · 2021-04-14T21:02:46

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>

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

1 Answers