Content incorrectly rendered inside table.

[ryasmi]

Hi, I'm trying to get some content to load inside a table, but it doesn't seem to work. I think maybe I should be extending tags such as tr and table rather than what I'm doing.

index.html

<badsey-table id="players">
    <badsey-player name="" matches="0" batPts="0" bwlPts="0" fldPts="0" value="0"></badsey-player>
    <badsey-player name="" matches="0" batPts="0" bwlPts="0" fldPts="0" value="0"></badsey-player>
    <badsey-player name="" matches="0" batPts="0" bwlPts="0" fldPts="0" value="0"></badsey-player>
</badsey-table>

badsey-player.html

<link rel="import" href="../vendor/polymer/polymer.html"/>
<polymer-element name="badsey-player" attributes="name matches batPts bwlPts fldPts value">
  <template>
    <tr>
      <td>{{name}}</td>
      <td class="more">{{matches}}</td>
      <td class="more">{{batPts}}</td>
      <td class="more">{{bwlPts}}</td>
      <td class="more">{{fldPts}}</td>
      <td>{{batPts + bwlPts + fldPts}}</td>
      <td>{{value}}</td>
    </tr>
  </template>
  <script src="badsey-player.js"></script>
</polymer-element>

badsey-table.html

<link rel="import" href="../vendor/polymer/polymer.html"/>
<polymer-element name="badsey-table">
  <template>
    <table>
      <tbody>
        <tr>
          <th>Name</th>
          <th class="more">MP</th>
          <th class="more">Bat</th>
          <th class="more">Bwl</th>
          <th class="more">Fld</th>
          <th>Total</th>
          <th>Value</th>
        </tr>
        <content></content>
      </tbody>
    </table>
  </template>
  <script src="badsey-table.js"></script>
</polymer-element>

Rendered HTML

<badsey-table id="players">
    <badsey-player name="" matches="0" batpts="0" bwlpts="0" fldpts="0" value="0">
        <tr>
            <td></td>
            <td class="more">0</td>
            <td class="more">0</td>
            <td class="more">0</td>
            <td class="more">0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </badsey-player>
    <!-- More Players -->
    <table>
        <tbody>
            <tr>
                <th>Name</th>
                <th class="more">MP</th>
                <th class="more">Bat</th>
                <th class="more">Bwl</th>
                <th class="more">Fld</th>
                <th>Total</th>
                <th>Value</th>
            </tr>
        </tbody>
    </table>
</badsey-table>

[ryasmi]

Perhaps this is something to do with #266.

[robdodson]

Tables are really tricky to work with because they have all sorts of rules around what kinds of elements they'll display. Right now a content element inside of a table that's inside of a template gets hoisted out, which seems like a bug. I filed a ticket here.

But if you extend table, then you can use <content> again. So I recommend extending table, then extending tbody so you can repeat your rows, and passing a data model to the tbody.

<polymer-element name="fancy-table" extends="table" noscript>
  <template>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Food</th>
      </tr>
    </thead>
    <content></content>
  </template>
</polymer-element>

<polymer-element name="fancy-body" extends="tbody" attributes="players">
  <template>
    <!-- Using special tr style template. Not required in this case, but saves a few lines :) -->
    <!-- http://www.polymer-project.org/resources/faq.html#option-tr -->
    <tr template repeat="{{player in players}}">
      <td>{{player.name}}</td>
      <td>{{player.age}}</td>
      <td>{{player.food}}</td>
    </tr>
  </template>
  <script>
    Polymer('fancy-body', {
      players: [] // type hinting for Polymer so it knows to treat as Array
    });
  </script>
</polymer-element>

I tried initially extending tr but that doesn't work how you think it would. You're actually putting tds into the tr's shadow root if you do things that way, and it renders all screwed up.

Since we're extending elements, we have to use type-extension syntax.

<table is="fancy-table">
  <!-- Note: players is using valid JSON style quotation.  -->
  <tbody is="fancy-body"
         players='[{"name": "Rob", "age": 30, "food": "sushi"}, {"name": "Boris", "age": 50, "food": "pizza"}]'>
  </tbody>
</table>

Here's an example:
http://jsbin.com/nomes/20/edit

Hope that helps!

[ryasmi]

That looks good Rob, thanks a lot! 😸

[arthurevans]

One additional thought is that if you want to render a list of players, you don't need to have a separate element for the tbody, you could put the <tr template repeat> directly into your table element.

This approach puts all of the table components in the same shadow DOM tree, which is a little simpler to style.

[ryasmi]

That's exactly what I was just thinking 😄

On 17 May 2014 00:11, Arthur Evans [email protected] wrote:

One additional thought is that if you want to render a list of players,
you don't need to have a separate element for the tbody, you could put the directly into your table element.

This approach puts all of the table components in the same shadow DOM
tree, which is a little simpler to style.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/503#issuecomment-43388788
.