Add a way for developers to specify a 'container' element within a 'dom-repeat' template

[tuespetre]

This should help with #1567 and #1735 and an additional scenario that I have run into.

As a developer, I would like to be able to specify a selector for a 'container' element within a <template is="dom-repeat"> element so that I can successfully use dom-repeat with table and select elements in browsers that struggle (like IE) and so that I can successfully apply simple CSS pseudo-selectors like :last-child to the stamped child items.

The container property of the dom-repeat element should be a CSS selector that is used to locate the first matching descendant of the template to use as the 'container', while its contents are sliced out and used as the template for each rendered item.

Example for select

Source code:

<template is="dom-repeat" items="{{items}}" container="select">
    <select>
        <option value="{{item.Id}}">{{item.Name}}</option>
    </select>
</template>

Result of binding where items resolves to [{"Id":1,"Name":"One"},{"Id":2,"Name":"Two"}]:

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<template is="dom-repeat" container="select">
    #document-fragment
</template>

Example for table

Source code:

<template is="dom-repeat" items="{{items}}" container=".main">
    <table>
        <thead>
            <!-- contents omitted for brevity -->
        </thead>
        <tbody class="filters">
            <!-- contents omitted for brevity -->
        </tbody>
        <tbody class="main">
            <tr>
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
            </tr>
        </tbody>
    </table>
</template>

Result of binding where items resolves to [{"Id":1,"Name":"One"},{"Id":2,"Name":"Two"}]:

<table>
    <thead>
        <!-- contents omitted for brevity -->
    </thead>
    <tbody class="filters">
        <!-- contents omitted for brevity -->
    </tbody>
    <tbody class="main">
        <tr>
            <td>1</td>
            <td>One</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Two</td>
        </tr>
    </tbody>
</table>
<template is="dom-repeat" container=".main">
    #document-fragment
</template>

Example for CSS purposes

This example uses some Bootstrap classes to demonstrate the potential of using such a feature for styling purposes.

Source code:

<template is="dom-repeat" items="{{items}}" container=".list-group">
    <div class="list-group">
        <div class="list-group-item" data-id$="{{item.Id}}">
            {{item.Name}}
        </div>
    </div>
</template>

Result of binding where items resolves to [{"Id":1,"Name":"One"},{"Id":2,"Name":"Two"}]:

<div class="list-group">
    <div class="list-group-item" data-id="1">
        One
    </div>
    <div class="list-group-item" data-id="1">
        One
    </div>
</select>
<template is="dom-repeat" container=".list-group">
    #document-fragment
</template>

[kaste]

That looks like a super nice API. 👍

[Sleeckx]

Would love to see this happen as well 👍

[ssshake]

hey there, we've authored a polymer component that works around this select in IE issue pretty well (at least we think so). We'd really love some feedback. https://github.com/vehikl/polymer-select-with-options

[tomalec]

👍 for the idea and proposed API

We are trying to workaround similar problem with https://github.com/Juicy/juicy-table-repeat and https://github.com/Juicy/juicy-select

[tomalec]

As transition from Shadow DOM V0 to V1 shown (content="selector" -> slot="name") selectors may introduce many performance and implementation problems, so maybe it would be enough (and easier) to use just names?

Or even single dom-repeatable attribute, so we could repeat in many places (table head, table body)

Then @tuespetre examples would become slightly more explicit, but still short and clean.

Example for select

<template is="dom-repeat" items="{{items}}">
    <select>
        <option value="{{item.Id}}" dom-repeatable>{{item.Name}}</option>
    </select>
</template>

Example for table rows

<template is="dom-repeat" items="{{items}}">
    <table>
        <thead>
            <!-- contents omitted for brevity -->
        </thead>
        <tbody class="filters">
            <!-- contents omitted for brevity -->
        </tbody>
        <tbody>
            <tr dom-repeatable>
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
            </tr>
        </tbody>
    </table>
</template>

Example for table cols

<template is="dom-repeat" items="{{cols}}">
    <table>
        <caption>...</caption>
        <thead>
            <th dom-repeatable>{{item.head}}</th>
        </thead>
        <tbody>
            <tr>
                <td dom-repeatable>{{item.value}}</td>
            </tr>
        </tbody>
    </table>
</template>

Example for table rows & cols

It also give as possibility to more declarative nesting

<template is="dom-repeat" items="{{rows}}">
  <template is="dom-repeat" items="{{row.cols}}" as="col">
      <table>
          <tbody>
              <tr dom-repeatable>
                  <td dom-repeatable="col">{{col.value}}</td>
              </tr>
          </tbody>
      </table>
  </template>
</template>

[tuespetre]

@tomalec that is excellent. Better than my initial.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.