аюсь создать общие веб-компоненты, которые отображают коллекции объектов JSON, такие как древовидное представление и представление с несколькими списками (перемещение элементов между двумя списками). Я хотел бы скопировать шаблон, используемый Iron-List, где шаблон, содержащий представление отдельного элемента, передается в компонент для повторного использования.

Например, данный шаблон веб-компонента:

<dom-module id="intworkspace-tree">  
  <template>
    <style include="iron-flex iron-flex-alignment">

      paper-icon-item {
        --paper-item-min-height: var(--intworkspace-tree-margin,30px);
        --paper-item-icon-width : var(--intworkspace-tree-margin,30px);
      }

      paper-icon-item:focus::before,
      paper-icon-item:focus::after {
        color: inherit;
        opacity: 0;
      }

     .node {
        margin-left: var(--intworkspace-tree-margin,30px);;
      }
    </style>

    <slot id="labelView"></slot>

    <template id="nodeView">
      <div class="layout vertical">
      <paper-icon-item on-tap="nodeSelected">
        <iron-icon icon="expand-less" slot="item-icon" hidden$="[[!hasNodes(node)]]"></iron-icon>
        <!-- label goes here-->
      </paper-icon-item>

      <iron-collapse class="node" opened hidden$="[[!hasNodes(node)]]">
        <intworkspace-tree tree="[[node.nodes]]" embedded></intworkspace-tree>
      </iron-collapse>
      </div>
  </template>

  </template>
	...
  </dom-module>

и это использование:

 <intworkspace-tree tree="{{testTree}}">
      <template><paper-item-body>[[node.name]]</paper-item-body>  </template>
  </intworkspace-tree>
  

Я хотел бы отобразить массив деревьев JSON в иерархии, которая объединяет шаблон веб-компонента вместе с шаблоном, предоставленным через слот, для визуализации непрозрачных объектов JSON. До сих пор я определил два метода объединения шаблонов:

Используйте API Polymer.Templatize.templatize для загрузки шаблонов, создания / печати новых экземпляров и использования API DOM для их объединения и добавления в теневой DOM веб-компонента.

Получите доступ к содержимому шаблонов, объедините их вместе, создайте и импортируйте новый шаблон, а затем клонируйте его по мере необходимости.

После многих неприятностей я смог успешно реализовать № 1, но не № 2, и это мотивация для моего вопроса. № 2 более привлекателен для меня, потому что мне проще объединять шаблоны один раз, а не объединять их получившиеся штампованные экземпляры, и этот подход кажется единственным способом, которым я могу повторно использовать вложенные шаблоны, такие как dom-repeat.

Мое главное препятствие заключается в том, что после загрузки Polymer или, возможно, его polyfill шаблоны становятся непрозрачными и могут использоваться только с помощью шаблонизатора Polymer. Например, этот код работает нормально без какого-либо импорта Polymer:

<template>
  <div>Template Contents</div>
</template>
<div>
  Template Test
</div>
  <script>
  let template = document.querySelector("template");
  let clone = document.importNode(template.content,true);
  document.querySelector("div").appendChild(clone);
  </script>

За пределами Polymer у файла template.content DOMFragment есть дочерние элементы, и для него установлен innerHTML. Однако после использования Polymer шаблон.content не имеет дочерних элементов, а innerHTML становится пустым. Это не позволяет мне использовать DOM API для создания нового шаблона, который объединяет доступные шаблоны, т.е.

let newTemplate = document.createElement("template");
newTemplate.content = ... // combine #labelView > template.content with #nodeView.content 
let nodeView = document.importNode(newTemplate.content,true);
nodeView.tree=...

Возможно, дизайн шаблона импорта шаблонов с использованием стандартного механизма HTML не работал для меня. Есть ли другой способ динамически создавать / объединять шаблоны во время выполнения с Polymer? Опять же, моя главная мотивация заключается в том, что я хотел бы повторно использовать веб-компоненты dom-if и dom-repeat, вложенные в шаблон, без переопределения всей их функциональности.