Как вы клонируете / копируете теневой Dom DOM-узла?

Question

Я пытаюсь клонировать строку таблицы с помощью метода cloneNode() веб-API.Внутри этих строк таблицы находятся данные таблицы с некоторыми веб-компонентами vaadin, которые используют теневой 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

Вы не должны клонировать содержимое домена теней.Веб-компонент (в данном случае <vaadin-combo-box>) отвечает за его создание с помощью JavaScript при создании нового экземпляра этого элемента.Поэтому, когда вы клонируете веб-компонент и присоедините его к DOM, он сам создаст теневой DOM.

Ваша проблема здесь, вероятно, в том, что свойство items не установлено для клонированных элементов.Обратите внимание, что метод ready запускается только для первого экземпляра веб-компонента Polymer, а не для всех экземпляров.Используйте connectedCallback или constructor вместо этого, если вы хотите запускать некоторый код для каждого экземпляра.

Answer 2

Если вы хотите клонировать узел и его дочерние элементы, вы должны указать cloneNode .Пожалуйста, попробуйте установить для глубокого параметра cloneNode значение true.

element.cloneNode(true);