在动态上应用css：host

Question

如果condition == true？

，如何在我的元素（：host）上动态应用css

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

Answer 1

有很多方法可以实现这一目标。最简单的方法之一是使用Conditional Template Binding。那里有很多有用的信息。非常值得一试。

<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>