主体元素的聚合物背景颜色

Question

我正在使用Polymer用于我的网站的新版本，而且我在所有浏览器中显示数据绑定背景颜色时遇到一些问题。

Here is a live example。在Chrome中，它可以像预期的那样工作，并显示红色背景色（如下图所示）

现在，在Firefox和IE 11中，背景颜色没有显示出来，结果是这样的：

现在，我希望这与polyfill有关，因为Chrome是唯一支持自定义元素的浏览器in the browser compatibility page

这是我的代码（与实例相同）：

<polymer-element name="leiding-card" attributes="bgColor">

      <template>
        <style>
          :host{
            display: block;
            position: relative;
            padding: 20px;
            border-radius: 2px;
            background-color: {{bgColor}};
          }
          .profilePic{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            margin: 10px;
            background-size: 50px 50px;
          }
        </style>
        <link rel="stylesheet" href="default_styles.css">

        <paper-shadow z="1" animated="true"></paper-shadow>
        <div class="white">
          <content select="h1"></content>
          <template repeat="{{p in people}}">
            <div layout horizontal wrap around-justfied>
              <div class="profilePic" center style="background-image: url({{p.profilePic}});"></div>
              <div style="margin-right: 10px;">
                <p>{{p.name}} {{p.lastname}}</p>
                <h4>{{p.email}}</h4>
              </div>
            </div>
          </template>
        </div>

      </template>

      <script>
        Polymer('leiding-card',{
          ready: function(){
            this.people = [
              {name: "John", lastname: "Snow", profilePic: "http://lorempixel.com/output/cats-q-c-640-480-3.jpg", email: "john.snow@john.snow"},
              {name: "Other", lastname: "Bastard", profilePic: "http://lorempixel.com/output/cats-q-c-640-480-8.jpg", email: "other.bastard@other.bastard"}
            ]
          }
        });
      </script>

    </polymer-element>

我已经尝试过像polyfill-next-selector { content: ':host'; }那样的东西，但是我无法在网上找到它的例子，通常我没有看到直接将样式应用到:host的任何问题。

Answer 1

在polyfill - https://github.com/Polymer/polymer/issues/270下的样式标签中，绑定不起作用的公开错误。看起来在错误提示中提供了一种解决方法，请参阅http://jsbin.com/pelon/1/edit