Abfrage polymer.dart benutzerdefinierte Eigenschaft Wert

Question

Wie kann ich den Wert einer benutzerdefinierten Eigenschaft in Polymer.dart 1.0 abfragen?

ich habe:

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

es auf ein untergeordnetes Element von my-element Passing funktioniert, zum Beispiel:

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

Aber wie kann ich den Wert von Dart in my-element in einer Weise abfragen das funktioniert in allen Browsern?

Ich habe versucht, $['header'].customStyle['--paper-toolbar-color'] und das gleiche auf this und auch für --my-color, aber es funktioniert nicht, es sei denn, ich zuerst die Custom von Dart gesetzt.

Ich habe es geschafft

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

und dann liest diese mit $['header'].getComputedStyle().color;, aber Firefox gibt den vererbten Farbwert durch Setzen der benutzerdefinierten Eigenschaft anstelle des einen um ihn herum in Chrome zu arbeiten.

Irgendwelche Ideen? Vielen Dank!

Answer 1

Soweit ich weiß, können Sie derzeit nur CSS-Variablen lesen, die in der aktuellen Komponente deklariert sind, aber Sie können keine globalen CSS-Variablen innerhalb einer Komponente lesen.

Wenn Sie dies in Ihrem Header-Komponente:

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

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

dann Sie es mit

customStyle['--my-color'] 

sonst lesen können Ihre Abhilfe ist der Weg zu gehen.