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

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

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

ShadowChild
FirstChild
SecondChild

要么

FirstChild
SecondChild
ShadowChild

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

ShadowChild

=>如何保存/展示原始孩子？

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

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

=>如何为自定义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>

enter image description here

我使用title属性为 treez-tab-folder 的阴影dom中的选项卡创建 Headers . Headers 的创建有效，但标签不再可见 . 我可以将原始的 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） .

javascript html shadow-dom