不良造型聚合物元件

Question

I'm having trouble styling a polymer paper button element. In the following example, I'm not sure why my styles for #rate are not being applied to the paper button.

 <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

Changed :host #rate to #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> 

Answer 2

If I copy your code the style section will not apply, but if I manually retype :host #rate{..} with all the same info it works fine. Maybe a hidden character that is causing a parsing issue.

Well that was a fun one to trouble shoot, just confirmed in notepad++ your indention is with tabs, looks like a bug in polymer's parser. If you just delete the tabs from each line it works fine