Using an @observable string as background image URL with style tag works in Dart but no in JavaScript

[DartBot]

This issue was originally filed by fniemann...@gmail.com

---

What steps will reproduce the problem?

1. Publish URL for an image as an @­observable field of type string in a custom element
2. Use the @­observable field in the custom element's HTML as the URL for a background image, e.g.
   background: url('{{backgroundImageUrl}}') no-repeat center center fixed;

What is the expected output?
Background image is displayed in both cases, Dart and JavaScript.

What do you see instead?
Background image is only displayed when using Dart in the DartEditor supplied Chromium.
But it doesn't work when using the "pub build" created JavaScript in a regular Chrome browser.

What version of the product are you using?
Dart Editor version 1.0.0_r30798 (STABLE)
Dart SDK version 1.0.0.10_r30798

On what operating system?
OS X 10.9

Please provide any additional information below.
An annoying but feasible workaround is the following:
<div style="background-image:url('{{backgroundImageUrl}}')">

Attached is a sample app that shows the bug.

---

Attachment:
css_bg_image_bug.zip (1.53 MB)

[DartBot]

This comment was originally written by fni...@gmail.com

---

Here is a new version of the sample app to showcase the bug. In the original attachment I used @­published instead of @­observable. Same bug though.

---

Attachment:
css_bg_image_bug.zip (1.53 MB)

[lrhn]

Added Area-Polymer, Triaged labels.

[sigmundch]

Thanks again for the detail repro code.

This is unfortunately a bug that comes from polymer.js. Bindings are basically not supported inside style blocks. For more details, see Polymer/polymer#270

---

Added Duplicate label.
Marked as being merged into #13325.