Simple example of the Polymer.Templatize API in a component (Polymer 2.0).

polymer-templatize-example.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="polymer-templatize-example">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <!-- This is where we'll inject our templates -->
    <div id="inject"></div>

    <!-- Two as simple as possible templates we'll use with templatize() -->
    <template id="simple">
      <div on-click="logSomething" data-index$="[[index]]">simple value: [[someValue]]</div>
    </template>

    <template id="grouped">
      <div on-click="logSomething" data-index$="[[index]]">grouped value: [[someValue]]</div>
    </template>

  </template>

  <script>
    /**
     * `polymer-templatize-example`
     * Simple and hopefully readable example of using Polymer.Templatize.templatize();
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class PolymerTemplatizeExample extends Polymer.Element {
      static get is() { return 'polymer-templatize-example'; }
      static get properties() {
        return {
          //* List of values we'll loop over */
          aListOfValues: {
            type: Array,
            value: () => {
              return [
                'one',
                'two',
                'three',
                'four'
              ];
            }
          }
        };
      }

      ready() {
        super.ready();

        // Get a template from somewhere, in this case from the shadowRoot, but could be from anywhere.
        let simpleTemplate = this.shadowRoot.querySelector('#simple');
        let SimpleTemplateClass = Polymer.Templatize.templatize(simpleTemplate);

        // Get another template.
        let groupedTemplate = this.shadowRoot.querySelector('#grouped');
        let GroupedTemplateClass = Polymer.Templatize.templatize(groupedTemplate);

        for (let i = 0; i < this.aListOfValues.length; i++) {
          const entry = this.aListOfValues[i];

          // Example of conditionally adding different types of templates.
          let instance;
          if ( entry == 'two') {
            // Instance the template with an initial data model
            instance = new GroupedTemplateClass({someValue: entry, index: i});

          } else {
            // Instance the template with an initial data model
            instance = new SimpleTemplateClass({someValue: entry, index: i});
          }

          // Insert the instance's DOM somewhere, e.g. element's shadow DOM
          this.shadowRoot.querySelector('#inject').appendChild(instance.root);
        }

      }

      // The on-click event used in the template stamps.
      logSomething(e) {
        e.stopPropagation();
        console.log('something', e.target.dataset.index);
        
        // You could inject another template here and create recursion/tree structure.
      }
    }

    window.customElements.define(PolymerTemplatizeExample.is, PolymerTemplatizeExample);
  </script>
</dom-module>