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

Question

我试图用web API qazxsw poi方法克隆表行。在这些表行内部是表数据，其中一些vaadin Web组件使用shadow DOM来获取和呈现其数据。

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

有办法克服这个问题吗？

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

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

知道如何克隆连接了shadow DOM的节点吗？

Answer 1

你不应该克隆阴影dom内容。 Web组件（在本例中为

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'];
      }

）负责在创建该元素的新实例时使用JavaScript创建该组件。因此，当您克隆Web组件并将其附加到DOM时，它将自己创建影子DOM。

你的问题可能是没有为克隆元素设置<vaadin-combo-box>属性。请注意，items方法仅针对Polymer Web组件的第一个实例运行，而不是针对所有实例运行。如果要为每个实例运行一些代码，请使用ready或connectedCallback。

Answer 2

如果你想克隆一个节点，那么你必须告诉constructor。请尝试将cloneNode的深层参数设置为true。

cloneNode