Question

以下元素在Chrome中运行良好，但在Firefox中无效。我期待看到的是我的主题颜色，它是在一个单独的地方定义的。

现在在firefox中，组件本身会呈现，它甚至会创建{40}正确大小的.swatch div，如阴影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 clean。

Answer 1

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

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

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

1 个答案: