Как стилизовать бумажные элементы внутри пользовательского элемента (Polymer 1.0)?

Question

Что бы я ни делал, я не могу показаться, чтобы быть в состоянии типа бумажных элементов с помощью пользовательских свойств внутри пользовательского элемента:

<dom-module id="ts-dashboard"> 
    <style> 
     :host { 
     display: block; 
      --paper-tabs-selection-bar-color : #ED1C23; 
     } 
     paper-tabs { 
     background-color : #962E33; 
     } 
    </style> 
    <template> 
    <paper-tabs selected="{{selected}}"> 
     <paper-tab>Choice 1</paper-tab> 
     <paper-tab>Choice 2</paper-tab> 
    </paper-tabs> 
    <!-- some more elements... --> 
    </template> 
</dom-module> 
<script> 
    //Module definition here 
</script> 

Но --paper-tabs-selection-bar-color не принимается во внимание, и я в конечном итоге по умолчанию желтый, а не ярко-красный.

В частности, я использую shadow-dom вместо shady-dom, но переход к теневой реализации ничего не изменил. Я также использую файл темы, как импорт html, для установки --default-primary-color и других настраиваемых свойств сортировки. Они, похоже, работают, хотя внутри свойства 0sscss, но даже если я положил --paper-tabs-selection-bar-color : #ED1C23;, он тоже не работает.

Я пробовал с paper-input-controller, но стили также не применяются. Любая идея, что я делаю неправильно здесь?

Answer 1

Я использую импортировать внешнюю таблицу стилей, как:

<dom-module id="ts-dashboard"> 
    <link rel="import" type="css" href="ts-dashboard.css"> 
    <template> 
    <paper-tabs selected="{{selected}}"> 
     <paper-tab>Choice 1</paper-tab> 
     <paper-tab>Choice 2</paper-tab> 
    </paper-tabs> 
    <!-- some more elements... --> 
    </template> 
</dom-module> 
<script> 
    //Module definition here 
</script> 

Тогда это должно работать:

paper-tabs { 
    --paper-tabs-selection-bar-color: #ED1C23; 
} 

(Update: Только понял, что я вставил, что неправильно Фиксированный к тому, что в моем внешнем CSS. файл)