트러블 스타일링 폴리머 엘리먼트

Question

폴리머 용지 버튼 엘리먼트를 스타일링하는데 문제가 있습니다. 다음 예제에서는 #rate의 내 스타일이 용지 버튼에 적용되지 않는 이유가 확실하지 않습니다.

<script src="http://www.polymer-project.org/platform.js"></script> 
 
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
 
<link href="http://www.polymer-project.org/components/paper-button/paper-button.html" rel="import"> 
 

 
<polymer-element name="my-element" noscript> 
 
    <template> 
 
    <style> 
 
     
 :host #rate { 
 
     
 background: yellow; 
 
     
 color: green; 
 
     
 height: 25px; 
 
     
 line-height: 8px; 
 
     
 margin: 0; 
 
     
 text-transform: none; 
 
     } 
 
    </style> 
 
    <paper-button id="rate">rate/reply</paper-button> 
 
    </template> 
 
</polymer-element> 
 
<my-element></my-element>

Answer 1

내가 스타일 섹션이 적용되지 않습니다 코드를 복사 할 경우에 :host #rate을 변경,하지만 난 수동으로 다시 입력하는 경우 : 호스트 # 비율 {..} 잘 작동하는 모든 동일한 정보 . 어쩌면 구문 분석 문제를 일으키는 숨겨진 문자 일 수 있습니다.

글쎄, 문제 해결에 재미 있었고, 메모장에서 확인해 봤어. + 당신의 들여 쓰기가 탭으로되어있어, 폴리머 파서의 버그처럼 보입니다. 각 줄에서 탭을 삭제하면 잘 작동합니다.

Answer 2

는 #rate

<script src="http://www.polymer-project.org/platform.js"></script> 
 
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
 
<link href="http://www.polymer-project.org/components/paper-button/paper-button.html" rel="import"> 
 

 
<polymer-element name="my-element" noscript> 
 
    <template> 
 
    <style> 
 
#rate{ 
 
background:red;; 
 
color: yellow; 
 
height: 40px; 
 
width:100px; 
 
margin: 0; 
 
text-transform: none; 
 
} 
 

 
    </style> 
 
    <paper-button id="rate">rate/reply</paper-button> 
 
    </template> 
 
</polymer-element> 
 
<my-element></my-element>