造型聚合物元件故障

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

如果我复制你的代码风格的部分将不适用，但如果我手动重新输入：主机＃率{..}与所有相同的信息，它工作正常。也许是导致解析问题的隐藏字符。

那么这是一个有趣的麻烦拍摄，只记得在记事本++中，你的缩进是与制表符，看起来像聚合物的解析器中的错误。如果你只是从每一行删除标签，它工作正常

Answer 2

改变:host #rate到#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>