ポリマー要素をオーバーライドする

Question

既存のポリマー要素spinner-backdrop をZ-インデックスCSS属性をオーバーライドしてカスタマイズしたいとします。

外部からのすべてのカスタマイズの試行が失敗しました。

z-index属性は外部のカスタマイズのために公開されていないため、です。

私はそのコンポーネントをAngular2アプリの中にラップして使用しています。

この要素を拡張する新しいポリマー要素を作成する必要がありますか？

私はポリマー成分を開発したことがないため、より直接的な経路がありますか？

Answer 1

<spinner-backdrop>の現行1.0.0リリースはz-indexを設定するには何のCSSプロパティ/ミックスインを持っていませんが、--spinner-backdrop-overlayミックスインは、最近追加されたとはまだ発売されていませんでした。あなたは、このような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)