聚合物1.0 dom-if vs hidden

Question

From https://www.polymer-project.org/1.0/docs/api/dom-if

When if becomes falsey, the stamped content is hidden but not removed from dom. When if subsequently becomes truthy again, the content is simply re-shown. This approach is used due to its favorable performance characteristics: the expense of creating template content is paid only once and lazily.

I thought this was the behavior of hidden attribute, thus hidden being cheaper than dom-if since the template would not get restamped with hidden . Since 'no restamp' is the default behavior dom-if , what is the difference between dom-if and hidden and how is hidden better for performance? Polymer best practices notes that hidden is cheaper.

Answer 1

My understanding of it is that dom-if does not stamp until the expression becomes truthy, but after doing so it behaves much like [hidden] does. In that way dom-if is a pessimistic [hidden] that defers stamping for as long as possible.

This lazy-loading approach is favorable in certain situations where stamping the template would be very resource intensive. For example if the template was very large with multiple custom components that have to be initialized. If you had just used the hidden attribute there you would pay the performance cost of creating all of that DOM only for it to not be visible until later.

For simple cases, such as hiding or showing some text, a div or two, etc. the hidden attribute may be faster because the cost of creating those elements and then hiding them may be less than creating a <template> instance to hold your code, Polymer setting up listeners to monitor the expression for truthiness, then, when it becomes truthy, all the overhead for stamping the template, parsing it for binding expressions, etc. This is particularly true for the browsers where <template> support is polyfilled.

Thinking it through for your situation (and ideally testing it) is the best route to take. Often times the differences may be negligible but do take special care if this part of your code happens to be in a dom-repeat with a lot of items or anything that happens frequently. The difference could add up.

Answer 2

Hidden interferes with the display CSS property and therefore dom-if is a better option.

If you have

:host {display: block;}

setting hidden on the components host element won't hide it. You would also need to add a global style like

[hidden] { display: none !important;}

to make it work reliably (and to make it work in IE9 which doesn't support hidden AFAIR).