覆盖聚合物元素css

Question

我想自定义现有的聚合物元素spinner-backdrop 通过覆盖其z-index css属性。

来自外部的所有自定义尝试都失败了。

因为外部自定义没有公开 z-index 属性。

我在Angular2应用程序中使用该组件。

我应该创建一个扩展该元素的新聚合物元素吗？

是否有更直接的途径，因为我从未开发过聚合物元素。

Answer 1

1.0.0的当前<spinner-backdrop>版本没有CSS属性/ mixin来设置z-index，但--spinner-backdrop-overlay mixin最近已添加但尚未发布。您可以使用mixin像这样设置z-index：

<style is="custom-style">
  spinner-backdrop {
    --spinner-backdrop-overlay: {
      z-index: 0;
    };
  }
</style>

如果<spinner-backdrop>位于Polymer元素（<dom-module>）内，则<style>不需要is="custom-style"。否则，需要正确应用mixin。

demo (in <dom-module>)

demo (in index.html)