如何在自定义元素(聚合物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，我最终得到的是默认的黄色，而不是鲜红色。

值得注意的是，我使用的是影子域而不是shady-dom，但是切换回shady实现并没有改变任何事情。我还使用主题文件(作为html导入)来设置--default-primary-color和其他自定义的排序属性。不过，在:root{ } css属性中，这些方法似乎有效，但即使我将--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;
}

(更新:我刚刚意识到我贴错了。修正了我的外部CSS文件)