Polymer background-color of host element

Question

I'm using Polymer for a new version of my website and I'm having some issues with displaying a data-bound background-color in all browsers.

Here is a live example. In Chrome it works as one would expect, with a red background-color showing up (depicted in the image below)

Now, in Firefox and IE 11 the background-color does not show up, resulting in something like this:

Now, I expect this has something to do with the polyfill, since Chrome is the only browser to natively support custom elements as shown in the browser compatibility page

Here's my code (same as in live example):

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

I've already tried doing stuff like polyfill-next-selector { content: ':host'; }, but I can't really find an example of it online and usually I don't see any issues with directly applying styles to the :host.

Answer 1

There's an open bug around bindings not working in style tags under the polyfill - https://github.com/Polymer/polymer/issues/270. Looks like there's a workaround provided in the bug notes, see http://jsbin.com/pelon/1/edit