In Polymer Dart, how to build a CSS table using 1 polymer-element for the table and another for the rows and cells

Issue

My goal is to build a table using CSS (display:table, table-row, table-cell) with 1 custom polymer-element defining the div for the table, and another polymer-element defining the divs for the rows and cells, like this

<my-table>
  <my-row col1="contents of column 1" col2="column 2">
      --html for content of column 3--  
  </my-row>
</my-table>

The problem I’m having is that the div created by with the “display:table;” isn’t being recognized by the divs created by with the “display:table-row” and “display:table-cell”. The divs created by seem to think they are in their own individual tables.

Is there a way to get this to work? If the answer is to use ::content ::shadow, then I need to be shown how because I can’t get it to work and behave as a single large table.

Solution

You should style the host of the polymer element, not the divs inside it.

Here is an example: https://gist.github.com/jakemac53/0d073615d723502a61ca

Answered By – Jake MacDonald

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *