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

Question

以下元素在 Chrome 中可以正常工作，但在 Firefox 中不行。 我希望看到的是我的主题颜色，它是在一个单独的地方定义的。

现在在 Firefox 中，组件本身会呈现，它甚至会创建 .swatch div，其正确大小为 40x40，如 shadow dom 样式中指定的那样。不幸的是，background-color 和 border css 规则从未应用。

firefox 和 chrome 中的控制台输出完全符合我的预期，颜色正确，这告诉我值确实存在，但由于某种原因，数据未绑定到 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>

我还应该指出，如果我直接在 .swatch div 上使用内联样式，那么绑定似乎可以正常工作，但我特意寻找一种解决方案来直接绑定到 css 以保持 html 干净.

Answer 1

似乎我在发布后立即发现了问题。 shadow dom 下的<style> 不完全支持数据绑定。[1]

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