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

Question

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

当使用cloneNode()时为此，shadow 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

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

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