如何在自定义元素（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，但是切换回 shady 实现并没有改变任何东西。我还使用主题文件作为 html 导入来设置 --default-primary-color 和其他自定义属性。虽然这些似乎有效，但在 :root{ } css 属性中，但即使我将 --paper-tabs-selection-bar-color : #ED1C23; 放在那里它也不起作用。

我试过 paper-input-controller 但样式也没有应用。知道我在这里做错了什么吗？

Answer 1

我使用导入外部样式 sheet 比如：

<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 文件中的内容）

如何在自定义元素（Polymer 1.0）中设置纸张元素的样式？

How to style paper elements inside of a custom element (Polymer 1.0)?

html

css

polymer

polymer-1.0