如何克隆/復制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);