Advanced indexed content insertion points with fallback

list-select.html

<wunderland-component attributes="name value values options type prefix_nodes">
  <template>
    <template repeat="{{val, i in values}}">
      <div class="prefix_insertion" id="{{i | attach_prefix_node}}"></div>
      <wunderland-select on-change="{{updateValue}}">
        <template repeat="{{opt in options}}">
          <wunderland-option selected="{{opt == val}}">{{opt}}</wunderland-option>
        </template>
      </wunderland-select>
      <wunderland-button class="remove" context="danger" on-click="{{removeOption}}" index="{{i}}" size="small">Remove</wunderland-button>
      <br>
    </template>
    <wunderland-button id="append" on-click="{{appendOption}}" size="small">
      Add {{type}}
    </wunderland-button>
    <content id="content"></content>
  </template>
  <script>
    Polymer('wunderland-list-select', {

      type: 'item',

      attached: function () {

        var options = this.options = this.options.split(',').map(function (o) { return o.trim(); }).sort();

        var values = [];
        this.value.split(',').forEach(function (value) {
          value = value.trim();
          if (options.indexOf(value) >= 0) {
            values.push(value);
          }
        });

        var prefix_nodes = [];
        [].forEach.call(this.$.content.getDistributedNodes(), function (node) {
          if (node.tagName) {
            prefix_nodes.push(node);
          }
        });
        this.prefix_nodes = prefix_nodes;
        this.$.content.parentNode.removeChild(this.$.content);

        this.values = values;
        setTimeout(this.updateValue.bind(this));
      },

      attach_prefix_node: function (index) {

        var self = this;
        var prefix = index != null ? 'prefix_' + index : '';
        var prefix_nodes = this.prefix_nodes;
        var node = prefix_nodes[index] || prefix_nodes[prefix_nodes.length - 1];

        prefix && node && setTimeout(function () {
          node = node.cloneNode(true);
          node.style.display = 'inline-block';
          node.style['margin-right'] = '10px';
          var insertion_point = self.shadowRoot.querySelector('#' + prefix);
          insertion_point.parentNode.insertBefore(node, insertion_point);
          insertion_point.parentNode.removeChild(insertion_point);
        });

        return prefix;
      },

      updateValue: function () {

        var values = [];

        [].forEach.call(this.shadowRoot.children, function (node) {
          if (node.tagName === 'WUNDERLAND-SELECT') {
            values.push(node.selected);
          }
        });

        this.value = values.join(',');
        this.setAttribute('value', this.value);
      },

      appendOption: function () {

        this.values.push(this.options[0]);
        setTimeout(this.updateValue.bind(this));
      },

      removeOption: function (ev, detail, target) {

        var index = parseInt(target.getAttribute('index'), 10);
        this.values.splice(index, 1);
        setTimeout(this.updateValue.bind(this));
      }
    });
  </script>
</wunderland-component>