你如何clone/copy一个DOM节点的影子Dom？

Question

我正在尝试使用 Web API 的 cloneNode() 方法克隆 table 行。在那些 table 行中是 table 数据，其中包含一些使用影子 DOM 获取和呈现其数据的 vaadin Web 组件。

当使用 cloneNode() 执行此操作时，阴影 DOM 不是 cloned/copied，所以现在我剩下一些渲染时没有输出的 vaadin 组合框。

有什么办法可以克服这个问题吗？

使用 cloneNode() 克隆的 table 细胞示例：

<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

如果您想克隆一个节点及其子节点，您必须告知 cloneNode。请尝试将 cloneNode 的 deep 参数设置为 true。

element.cloneNode(true);

Answer 2

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

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

你如何clone/copy一个DOM节点的影子Dom？

How do you clone/copy a DOM node's shadow Dom?

javascript

vaadin

shadow-dom

polymer