Polymer equivalent to ng-show?

Question

Is the a polymer equivalent for ng-show? Here's a snippet example of what I'm trying to convert:

<h1>Greeting</h1>
<div ng-show="authenticated">
    <p>The ID is {{controller.greeting.id}}</p>
    <p>The content is {{controller.greeting.content}}</p>
</div>
<div  ng-show="!authenticated">
    <p>Login to see your greeting</p>
</div>

Answer 1

dom-if is not necessary here. Simply use $= (attribute binding) to add/remove hidden attribute.

<style>
[hidden] {
    display:none;
}
</style>

<h1>Greeting</h1>
<div hidden$=[[!authenticated]]>
    <p>The ID is {{controller.greeting.id}}</p>
    <p>The content is {{controller.greeting.content}}</p>
</div>
<div hidden$=[[authenticated]]>
    <p>Login to see your greeting</p>
</div>

Use dom-if to make decisions about blocks of code that you don't want to be rendered, not just hidden.