Firefox에서 폴리머 맞춤 구성 요소 스타일링이 작동하지 않음 (데이터 바인딩 문제?)

Question

다음 요소는 Chrome에서는 제대로 작동하지만 Firefox에서는 작동하지 않습니다. 내가 바라는 부분은 별도의 장소에서 정의되는 테마 색상입니다.

이제 firefox에서 구성 요소 자체가 렌더링되고 그림자 dom 스타일에 지정된대로 정확한 크기 40x40 인 .swatch div가 만들어집니다. 죄송하지만 background-color 및 border CSS 규칙이 적용되지 않습니다.

파이어 폭스와 크롬의 콘솔 출력은 값이 존재한다는 것을 알려주는 정확한 색상으로 예상했던 것과 정확히 일치하지만 어떤 이유로 데이터가 파이어 폭스의 템플릿에 연결되지 않았습니까?

<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 사업부에 직접 인라인 스타일을 사용하는 경우, 다음 바인딩이 잘 작동하는 것 같다 지적해야하지만, 내가 특별히 솔루션은 CSS를 결합하는 직접을 유지하기 위해 찾고 있어요 html 깨끗하게.

Answer 1

내가 게시 한 직후에 문제가 있음을 알았습니다. 그림자 돔 아래의 <style>에서 데이터 바인딩이 완전히 지원되지 않습니다. [1]

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