polymer.dartカスタムプロパティ値のクエリ

Question

Polymer.dart 1.0のカスタムプロパティの値をクエリする方法を教えてください。

私が持っている：

<style is="custom-style"> 
    my-element { 
    --my-color: #ffffff; 
    } 
</style> 

my-elementの子要素に渡すには、例えば、正常に動作します：

.header { 
    --paper-toolbar-color: var(--my-color); 
} 

しかし、どのように、私は道にmy-elementにダートから値を照会することができますすべてのブラウザで動作しますか？

私は$['header'].customStyle['--paper-toolbar-color']を試してみましたが、同じthisにも--my-colorのため、私は最初のダートからcustomStyleを設定しない限り、それは動作しませんしています。

私は

.header { 
    color: var(--my-color); 
} 

を設定し、その後$['header'].getComputedStyle().color;でこれを読み取ることによって、Chromeでそれを回避するために管理しているが、Firefoxは継承されたカラー値の代わりに、カスタムプロパティから1を返します。

アイデア？ありがとう！

Answer 1

現時点では、現在のところ、現在のコンポーネントで宣言されているCSS変数のみを読み込めますが、コンポーネント内からグローバルCSS変数を読み取ることはできません。

あなたは、ヘッダー・コンポーネントで、このお持ちの場合：

<style> 
    :host { 
    --my-color: #ffffff; 
    } 

    .header { 
    --paper-toolbar-color: var(--my-color); 
    } 
</style> 

を、あなたが

customStyle['--my-color'] 

でそれを読むことができそうでない場合は、あなたの問題を回避するには、移動するための方法です。