Search code examples
csspolymerpolyfills

Polymer background-color of host element

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)

Background color showing in Chrome

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

Background color not showing in Frefox and IE

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: "[email protected]"},
              {name: "Other", lastname: "Bastard", profilePic: "http://lorempixel.com/output/cats-q-c-640-480-8.jpg", email: "[email protected]"}
            ]
          }
        });
      </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.

Solution

  • 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