Search code examples
csspolymer

Apply css on :host dynamically

How can I dynamically apply css on my element(:host) if condition == true?

<polymer-element name="my-element">
   <template>
        <style>
           :host{
             display: block;
           }
        </style>
    .......
</polymer-element>
Solution

  • There are a number of ways to accomplish this. One of the easiest ways is to use Conditional Template Binding. There's a lot of useful information in there. Very worth checking out.

    <polymer-element name="my-element">
    <template>
        <template if="{{condition}}">
            <style> Style set 1 </style>
        </template>
        <template if="{{condition2 OR !condition}}">
            <style> Style set 2 </style>
        </template>
        ....
    </template>
</polymer-element>