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

Question

我正在尝试使用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的节点？

Answer 1

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

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

Answer 2

如果要克隆节点及其子节点，则必须告诉cloneNode 。 请尝试将cloneNode的深色参数设置为true。

element.cloneNode(true);