Question

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

使用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组件（在这种情况下为2019-02-28 10:30:36 CET [21788]: [1-1] user=postgres,db=postgres,app=[unknown],client=::1 FATAL: the database system is starting up 2019-02-28 10:31:08 CET [9796]: [1-1] user=postgres,db=postgres,app=[unknown],client=::1 FATAL: the database system is starting up）负责使用JavaScript创建该组件。因此，当您克隆Web组件并将其附加到DOM时，它会自行创建影子DOM。

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

Answer 2

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

element.cloneNode(true);

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

2 个答案: