title: data:image backgrounds break for stylesheets linked to from inside the polymer-element template
body: <p>See the <code>&lt;swiper-slider&gt;</code> element I'm trying to create here:</p>
  
  <p><a href="https://github.com/leoj3n/swiper-slider" rel="nofollow">https://github.com/leoj3n/swiper-slider</a></p>
  
  <p>Specifically this file:</p>
  
  <p><a href="https://github.com/leoj3n/swiper-slider/blob/master/swiper-slider.html#L19" rel="nofollow">https://github.com/leoj3n/swiper-slider/blob/master/swiper-slider.html#L19</a></p>
  
  <p>Install it and inspect <code>&lt;div class="swiper-button-next"&gt;&lt;/div&gt;</code> to see how the <code>background-image</code> CSS links to <code>data:image/svg+xml;charset=utf-8,&lt;svg...</code> that, when opened in new tab, reports: <code>error on line 1 at column 11: AttValue: " or ' expected</code>.</p>
  
  <p>If I add the following declaration:</p>
  
  <pre><code>.swiper-button-next {
    background-image: url('http://lorempixel.com/output/abstract-q-c-185-114-8.jpg');
  }
  </code></pre>
  
  <p>To the <code>&lt;style&gt;</code> tag after the include, a background image appears so I'm not sure why it's having issues with the <code>data:image/svg+xml</code>.</p>
  
  <p>Any insights as to why <code>data:image/svg+xml</code> for CSS background is failing?</p>