在 :host 上动态应用 css

Question

如果条件 == 真，如何在我的元素 (: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>

在 :host 上动态应用 css

Apply css on :host dynamically

css

polymer