2014-10-29 4 views
0

У меня возникли проблемы с стилизацией элемента бумаги из полимерной бумаги. В следующем примере я не уверен, почему мои стили для #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>

ответ

0

Если скопировать код раздел стиль не будет применяться, но если я вручную перепечатывать: хост # rate {..} со всей информацией, которую она отлично работает , Может быть, скрытый персонаж, вызывающий проблему синтаксического анализа.

Хорошо, что это было весело, чтобы не допустить выстрела, только что подтвержденный в блокноте ++, ваш отступ с вкладками выглядит как ошибка в парсере полимера. Если вы просто удаляете вкладки с каждой строки, она отлично работает

enter image description here

0

Изменено :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>

Смежные вопросы