Polymer自定义元素样式在Firefox中不起作用（数据绑定问题？）

Question

The following element works fine in Chrome, but not in firefox. What I'm expecting to see is my theme colours, which is defined in a separate place.

Now in firefox, the component itself renders, and it even creates the .swatch div, with the correct size of 40x40, as specified in the shadow dom styles. Unfortunately the background-color and border css rules are never applied.

The console output in firefox and chrome is exactly as I would expect, with the correct colours, which tells me that the values does exist, but for some reason the data is not bound to the template in firefox?

<polymer-element name="color-sample" attributes="color border">
    <template>
        <style>
            .swatch {
                width: 40px;
                height: 40px;
                margin-right: 0.5em;
                background-color: {{ swatchColor }};
                border: 1px solid {{ borderColor }};
            }
        </style>
        <div id="sample" layout horizontal center>
            <div class="swatch"></div>
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            color: "white",
            border: "lightGrey",
            ready: function() {
                this.swatchColor = CoreStyle.g.theme[this.color];
                this.borderColor = CoreStyle.g.theme[this.border];
                console.log(this.swatchColor);
                console.log(this.borderColor);
            }
        });
    </script>
</polymer-element>

I should also point out that if I use inline styles directly on the .swatch div, then the binding seems to work fine, but I'm specifically looking for a solution to bind to the css directly to keep the html clean.

Answer 1

Seems I found the problem right after I posted. Data binding isn't fully supported in <style> under the shadow dom.[1]

[1] https://github.com/Polymer/polymer/issues/456