如何克隆/复制 DOM 节点的影子 Dom？答案

【问题标题】：How do you clone/copy a DOM node's shadow Dom?如何克隆/复制 DOM 节点的影子 Dom？
【发布时间】：2019-02-25 23:05:49
【问题描述】：

我正在尝试使用 Web API 的 cloneNode() 方法克隆表行。在这些表格行中是表格数据，其中包含一些使用影子 DOM 获取和呈现其数据的 vaadin Web 组件。

当使用cloneNode() 执行此操作时，影子 DOM 不会被克隆/复制，所以现在我留下了一些渲染时没有输出的 vaadin 组合框。

有没有办法克服这个问题？

使用cloneNode() 克隆的表格单元格示例：

<td style="text-align:center;">
   <vaadin-combo-box id="xxxlist" 
    value="{{definition.lkp_xxx_unit_id}}"
    item-label-path="value" item-value-path="id">
   </vaadin-combo-box>
</td>

然后我有这段代码来实际获取vaadin-combo-box 组件的项目：

ready: function() {
        app.addEventListener('xxx-choices-changed', function(event) {
          this.$.xxxlist.items = app.choices['lkp_xxx_id'];
        }.bind(this));
        this.$.xxxlist.items = app.choices['lkp_xxx_id'];
      }

知道如何克隆附加了影子 DOM 的节点吗？

【问题讨论】：

标签： javascript polymer vaadin shadow-dom

【解决方案1】：

您不应该克隆 shadow dom 内容。 Web 组件（在本例中为<vaadin-combo-box>）负责在创建该元素的新实例时使用 JavaScript 创建它。因此，当您克隆 Web 组件并将其附加到 DOM 时，它会自行创建影子 DOM。

您的问题可能是没有为克隆元素设置items 属性。请注意，ready 方法仅适用于 Polymer Web 组件的第一个实例，而不适用于所有实例。如果您想为每个实例运行一些代码，请改用connectedCallback 或constructor。

【讨论】：

这正是我为解决问题所做的，我为我的所有 vaadin 组件重新分配了 items 属性，它解决了问题。

【解决方案2】：

如果你想克隆一个节点及其子节点，你必须告诉cloneNode 所以。请尝试将 cloneNode 的 deep 参数设置为 true。

element.cloneNode(true);

【讨论】：

您好，感谢您的回答！我确实将它设置为 true，但它在我克隆的 DOM 节点的 shadowRoot 下没有得到任何东西。
同意。这将是一个很好的功能，而不必做任何疯狂的递归疯狂。克隆整个 DOM 或 DOM 结构的内置功能会很好。