Polymer styling element

Question

Currently I am trying to integrate SlickGrid into a polymer element and have some troubles with the style.

The original SlickGrid example with a very primitive css style looks different when I embedd it into a polymer element.

Code without polymer:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid example 1: Basic grid</title>
  <style>
      .slick-cell, .slick-headerrow-column {
          position: absolute;
          border: 1px solid transparent;
          border-right: 1px dotted silver;
          border-bottom-color: silver;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          vertical-align: middle;
          z-index: 1;
          padding: 1px 2px 2px 1px;
          margin: 0;
          white-space: nowrap;
          cursor: default;
      }
  </style>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>basic grid with minimal configuration</li>
      </ul>
    </td>
  </tr>
</table>

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</body>
</html>

Screenshot

original

Polymer element code:

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


<polymer-element name="polymer-slickgrid">
    <template>
        <style>
            .slick-cell, .slick-headerrow-column {
                position: absolute;
                border: 1px solid transparent;
                border-right: 1px dotted silver;
                border-bottom-color: silver;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                vertical-align: middle;
                z-index: 1;
                padding: 1px 2px 2px 1px;
                margin: 0;
                white-space: nowrap;
                cursor: default;
            }

        </style>
        <div id="slickGrid" style="width:600px;height:500px;"></div>
    </template>
    <script src="bower_components/slickgrid/lib/jquery-1.7.min.js"></script>
    <script src="bower_components/slickgrid/lib/jquery.event.drag-2.2.js"></script>

    <script src="bower_components/slickgrid/slick.core.js"></script>
    <script src="bower_components/slickgrid/slick.grid.js"></script>
    <script>
        Polymer('polymer-slickgrid', {
            domReady: function(){
                var grid;
                var columns = [
                    {id: "title", name: "Title", field: "title"},
                    {id: "duration", name: "Duration", field: "duration"},
                    {id: "%", name: "% Complete", field: "percentComplete"},
                    {id: "start", name: "Start", field: "start"},
                    {id: "finish", name: "Finish", field: "finish"},
                    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
                ];

                var options = {
                    enableCellNavigation: true,
                    enableColumnReorder: false
                };
                var self = this;
                $(function () {
                    var data = [];
                    for (var i = 0; i < 500; i++) {
                        data[i] = {
                            title: "Task " + i,
                            duration: "5 days",
                            percentComplete: Math.round(Math.random() * 100),
                            start: "01/01/2009",
                            finish: "01/05/2009",
                            effortDriven: (i % 5 == 0)
                        };
                    }
                    var element = self.$.slickGrid;
                    var grid = new Slick.Grid(element, data, columns, options);
                })
            }

        });
    </script>
</polymer-element>

Usage of the element

<html>
<head lang="en">
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="polymer-slickgrid.html">
</head>
<body>
<polymer-slickgrid></polymer-slickgrid>
</body>
</html>

Screenshot

polymer

Edit

It seems as if the cell style is applied but the rows have different style information when used inside a polymer element.

Screenshot of CSS without polymer

css with polymer

Screenshot of SlickGrid inside Polymer element

css without polymer

did you check with Chrome Dev Tools, if the css classes and styles are properly applied (compare it to a non polymer version) ? My guess is that `jQuery` will have its problems with the shadowDOM. — Ümit, Jul 03 '14 at 11:23

badsyntax · Accepted Answer · 2014-07-03T15:27:33.840

It looks like your your <polymer-slickgrid> element is displayed inline. See here: http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles

Simple solution:

<style>
  :host {
    /* Note: by default elements are always display:inline. */
    display: block;
  }
</style>

..or you could add a 'block' attribute, like so: <polymer-slickgrid block>

[update]

It looks like the plugin is adding inline styles to the document <head> which means those styles won't be applied to your element.

See here: https://github.com/mleibman/SlickGrid/blob/e6e2f88f832742c44e0fabf1f3864e5176386033/slick.grid.js#L921

As a hacky hack and proof of concept, you could get those styles and inline them into your element:

var styles = [];
var styleSheets = window.document.styleSheets;
$.each(styleSheets, function(i, sheet) {
    var sheet = styleSheets[i];
    if (sheet.cssRules) {
        $.each($.makeArray(sheet.cssRules), function(i, rule) {
            if (rule.cssText && /slickgrid/.test(rule.cssText)) {
                styles.push(rule.cssText);
            }
        })
    }
});

var inlineStyles = '';
$.each(styles, function(i, style) {
    inlineStyles += (style + "\n");
});
inlineStyles = '<style type="text/css">' + inlineStyles + '</style>';
$(this.$.slickGrid).before(inlineStyles);

I have not tested this code in many browsers, please don't use it, it's just a POC. I added that code after var grid = new Slick.Grid(element, data, columns, options);

Here's what the grid looks like with the above hack, displayed in a custom element (i also had to add the jquery ui and slick.grid stylesheets into the custom element):

enter image description here

I tried both methods and still the output is the same as before. — Eggi, Jul 03 '14 at 13:06

Polymer styling element

Code without polymer:

Polymer element code:

Edit

1 Answers1