宿主元素的聚合物背景颜色答案

【问题标题】：Polymer background-color of host element宿主元素的聚合物背景颜色
【发布时间】：2014-09-05 11:47:57
【问题描述】：

我正在为我的网站的新版本使用 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 的任何问题。

【问题讨论】：

标签： css polymer polyfills

【解决方案1】：

在 polyfill - https://github.com/Polymer/polymer/issues/270 下的样式标签中存在一个未解决的绑定问题。错误说明中似乎提供了解决方法，请参阅http://jsbin.com/pelon/1/edit

【讨论】：