conditional template to load external css in polymer - css

Question

Hi I'm trying to load conditionlly an external css file in my polymer but is not working
the code:
<polymer-element name="my-polymer-component" attributes="query">
<template>
<template if="{{condition}}">
<link type="text/css" rel="stylesheet" href="my-polymer-component.css"/>
</template>
<template if="{{condition}}">
<link type="text/css" rel="stylesheet" href="my-polymer-component2.css"/>
</template>
<section class="container">
<div class="headerImportText">
<span>
hello world
</span>
</div>
<section>
<template>
<script>
Polymer({
});
</script>
</polymer-element>
I need to changed the UI of the component by the condition.

Answer 1

As far as I know, you cannot do declarative conditional CSS loading in the template,
you must do your conditional CSS loading programmatically.
Here you have a sample: http://plnkr.co/edit/8Oavqpbh8eJTTKLw13bL?p=preview
Relevant part of the code:
<polymer-element name="my-polymer-component" attributes="condition">
<template>
<h1>Condition: {{condition}}</h1>
<section class="container">
<content> </content>
</section>
</template>
<script>
Polymer({
domReady: function() {
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", this.condition+".css")
console.log(fileref)
this.appendChild(fileref)
console.log("domReady!")
}
});
</script>
</polymer-element>
<h1>Here you have a sample</h1>
<my-polymer-component condition="a">
</my-polymer-component>
Hope it helps!