麻烦造型聚合物元素

Question

我在设计聚合物纸按钮元件时遇到了麻烦。在以下示例中，我不确定为什么#rate的样式未应用于纸张按钮。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将: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>

Answer 2

如果我复制你的代码，样式部分将不适用，但如果我手动重新输入：host #rate {..}具有​​所有相同的信息，它可以正常工作。也许是导致解析问题的隐藏角色。

这是一个很有趣的麻烦拍摄，只是在记事本++中确认你的缩进带有标签，看起来像聚合物解析器中的错误。如果你只删除每行的标签，它可以正常工作