Search code examples
htmlpolymerweb-component

Reimplementing html table with polymer not work

I am trying directly render custom xml representation of table in web browser using web-component polymer library. Unfortunately result in web browser chrome is all cells in one column and in firefox in one row. Is it problem with polymer or i just doing something wrong?

XML document i would like to reimplement by web components:

<core-document>
  <core-table>
    <core-row>
      <core-hcell colspan="1" rowspan="1">
        <core-text>a</core-text>
      </core-hcell>
      <core-hcell colspan="1" rowspan="1">
        <core-text>b</core-text>
      </core-hcell>
      <core-hcell colspan="1" rowspan="1">
        <core-text>c</core-text>
      </core-hcell>
    </core-row>
    <core-row>
      <core-cell colspan="1" rowspan="1">
        <core-text>1</core-text>
      </core-cell>
      <core-cell colspan="1" rowspan="1">
        <core-text>2</core-text>
      </core-cell>
      <core-cell colspan="1" rowspan="1">
        <core-text>3</core-text>
      </core-cell>
    </core-row>
  </core-table>
</core-document>

Whole HTML page:

<!DOCTYPE html>
<html>
<head>
  <!-- 1. Load platform.js for polyfill support. -->
  <script src="assets/bower_components/platform/platform.js"></script>

  <!-- 2. Use an HTML Import to bring in the element. -->
  <link rel="import" href="assets/elements/core-document.html">
  <link rel="import" href="assets/elements/core-hcell.html">
  <link rel="import" href="assets/elements/core-cell.html">
  <link rel="import" href="assets/elements/core-row.html">
  <link rel="import" href="assets/elements/core-table.html">
  <link rel="import" href="assets/elements/core-text.html">

</head>
<body>
<core-document>
  <core-table>
    <core-row>
      <core-hcell colspan="1" rowspan="1">
        <core-text>a</core-text>
      </core-hcell>
      <core-hcell colspan="1" rowspan="1">
        <core-text>b</core-text>
      </core-hcell>
      <core-hcell colspan="1" rowspan="1">
        <core-text>c</core-text>
      </core-hcell>
    </core-row>
    <core-row>
      <core-cell colspan="1" rowspan="1">
        <core-text>1</core-text>
      </core-cell>
      <core-cell colspan="1" rowspan="1">
        <core-text>2</core-text>
      </core-cell>
      <core-cell colspan="1" rowspan="1">
        <core-text>3</core-text>
      </core-cell>
    </core-row>
  </core-table>
</core-document>

</body>
</html>

Components created with polymer:

core-document:

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

<polymer-element name="core-document" noscript>
  <template>
    <div><content></content></div>
  </template>
</polymer-element>

core-table:

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

<polymer-element name="core-table" noscript>
  <template>
    <div style="border: 1px solid black; display: table;">
      <content></content>
    </div>
  </template>
</polymer-element>

core-row:

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

<polymer-element name="core-row"  noscript>
  <template>
    <div style="border: 1px solid black; display: table-row;"><content></content></div>
  </template>
</polymer-element>

core-hcell:

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

<polymer-element name="core-hcell" noscript>
  <template>
    <span  style="display: table-cell;border: solid;border-width: thin;padding-left: 5px;padding-right: 5px"><content></content></span>
  </template>
</polymer-element>

core-cell:

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

<polymer-element name="core-cell" noscript>
  <template>
    <span  style="display: table-cell;border: solid;border-width: thin;padding-left: 5px;padding-right: 5px"><content></content></span>
  </template>
</polymer-element>

core-cell:

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

<polymer-element name="core-text" noscript>
  <template>
    <span><content></content></span>
  </template>
</polymer-element>

Note: I first tried create components with html table tags but the shadow dom looks weird, then i tried it with css.

Solution

  • You have to remember that the custom elements themselves are elements and participate in styling and layout. The styles/elements in the template generally end up in the ShadowDOM and are insulated from the containing DOM.

    IOW, from your definitions, a core-cell is an display-inline element, that has a display: table-cell element inside of it. This breaks the table layout system.

    You need to encode the special display properties directly on the host elements. One way is to use :host inside the shadow-root, like this:

    <polymer-element name="core-cell" noscript>
  <template>
    <style> :host { display: table-cell; border: thin solid; padding: 0 5px; } </style>
    <content></content>
  </template>
</polymer-element>

    Most of these elements are really just for styling, so another way to do it is to simply style the elements via css.

    http://jsbin.com/yevepe/1/edit

    Note: in the above construction there are no custom elements anywhere.

    Here is another version where I added a custom-element for an icon:

    http://jsbin.com/yevepe/2/edit