Mixing styles from an attribute and .style in dart in a polymer element

I came across this behaviour by chance. Imagine the following code that is used in a custom polymer element:

...
<polymer-element...>
<template>
...
<div id="foo" style="width: {{ totalWidth }}px;"></div>
...
</template>
</polymer-element>
...

And in Dart I tried the following:

$['foo'].style.backgroundImage = 'url('+imgAsBase64+')';

I tried all different syntaxes of URL()… but never got it working. What happens here is pretty simple: I tried to set the backgroudn image via the style attribute before the style attribute was evaluated by polymer. So the re-rendering (because I changed totalWidth also) overwrites my changes. Mixing is complicated that’s why I finally put it all into the HTML Code:

...
<polymer-element...>
<template>
...
<div id="foo" style="width: {{ totalWidth }}px; background-image: url({{ img }});"></div>
...
</template>
</polymer-element>
...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Please enter the captcha *