重寫聚合物元件的CSS

Question

我想通過覆蓋其z索引的CSS屬性來定製現有聚合物元件spinner-backdrop 。

從外面定製的所有嘗試都失敗了。

由於z索引屬性不暴露於外部的定製。

我使用的組件包裹的Angular2應用程序內。

我應該建立延伸該元素的新型高分子元素？

有沒有更直接的路線，因爲我從來沒有開發的聚合物元件。

Answer 1

<spinner-backdrop>當前1.0.0版本沒有CSS屬性/ mixin來設置z-index，但--spinner-backdrop-overlay mixin最近被添加並且尚未發佈。你可以使用混入設置z-index這樣的：

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

如果<spinner-backdrop>是聚合物元件（<dom-module>）內，您<style>不需要is="custom-style"。否則，需要正確應用mixin。

demo (in <dom-module>)

demo (in index.html)