聚合物造型元素

Question

Currently I am trying to integrate SlickGrid into a polymer element and have some troubles with the style. 目前我正在尝试将SlickGrid集成到聚合物元素中，并且在风格方面存在一些问题。

The original SlickGrid example with a very primitive css style looks different when I embedd it into a polymer element. 当我将它嵌入聚合物元素时，具有非常原始的css样式的原始SlickGrid示例看起来不同。

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 截图

原版的

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 截图

聚合物

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没有聚合物的屏幕截图

css与聚合物

Screenshot of SlickGrid inside Polymer element Polymer元素内部SlickGrid的屏幕截图

没有聚合物的css

Answer 1

It looks like your your <polymer-slickgrid> element is displayed inline. 看起来您的<polymer-slickgrid>元素是内联显示的。 See here: http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles 见这里： 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> ..或者你可以添加一个'block'属性，如下所示： <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. 看起来插件正在为文档<head>添加内联样式，这意味着这些样式不会应用于您的元素。

See here: https://github.com/mleibman/SlickGrid/blob/e6e2f88f832742c44e0fabf1f3864e5176386033/slick.grid.js#L921 见： 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: 作为一个hacky hack和概念证明，你可以获得这些样式并将它们内嵌到你的元素中：

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. 我没有在很多浏览器中测试过这段代码，请不要使用它，它只是一个POC。 I added that code after var grid = new Slick.Grid(element, data, columns, options); 我在var grid = new Slick.Grid(element, data, columns, options);之后添加了代码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): 这是网格在上面的hack中的样子，显示在自定义元素中（我还必须将jquery ui和slick.grid样式表添加到自定义元素中）：

在此输入图像描述

聚合物造型元素

问题描述

Code without polymer: 无聚合物代码：

Polymer element code: 聚合物元素代码：

Edit 编辑

1 个解决方案

解决方案1
1 已采纳 2014-07-03 12:20:50

聚合物造型元素

问题描述

Code without polymer: 无聚合物代码：

Polymer element code: 聚合物元素代码：

Edit 编辑

1 个解决方案

解决方案1 1 已采纳 2014-07-03 12:20:50

解决方案1
1 已采纳 2014-07-03 12:20:50