附加影子 DOM 时如何保留原始 DOM 子项？答案

【问题标题】：How to keep original DOM children when attaching a shadow DOM?附加影子 DOM 时如何保留原始 DOM 子项？
【发布时间】：2018-08-19 00:22:37
【问题描述】：

我有一个带有两个孩子的根 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

=>我怎样才能保留/显示原来的孩子？

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

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

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

如前所述，我希望启用原始子项的呈现或自动将原始子项“重定向/代理”到影子 DOM。

相关问题，包括不带shadow dom的tab文件夹示例：

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

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

【问题讨论】：

标签： javascript html shadow-dom

【解决方案1】：

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

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>

【讨论】：