if-diff - Vaadin Add-on Directory
Alternative to Polymer's dom-if that progressively compares two properties rather than just binding to a single boolean property
[](https://www.webcomponents.org/element/if-diff)
# \
\ is an alternative to Polymer's [dom-if](https://polymer-library.polymer-project.org/3.0/docs/devguide/templates#dom-if) element that allows comparison between two operands, as well as progressive enhancement. See [if-else](https://github.com/matthewp/if-else) for another data-centric alternative.
if-diff allows the server to display content that should be initially displayed, then adjusts what is displayed as conditions in the browser change.
For example, suppose today is Monday. The server could generate the syntax below:
```html
...
...
Who could hang a name on you
...
```
Generally, as will see, a data-* value of "1" should be interpreted as "matches", so assuming your css is consistent with that interpretation, the user will immediately see the desired text "I wish it was Sunday" before a single byte of JS is downloaded. Since the text for Tuesday is not yet applicable, embedding the content inside a template tag will allow the browser to ignore whatever is inside until needed. Only if the day changes would we need to display Tuesday. At that point, the template needs to be cloned (and discarded). So to fill in the details:
Rules:
1. The "tag" attribute refers to a data-* attribute / dataset.* property. The case is based on the property name.
2. Only downstream sibling elements are checked for the data-* attribute. This is to encourage unidirectional data flow, and keeping related things physically close.
3. Speaking of which, the optional m attribute indicates the maximum number of elements that are getting affected by the *if-diff* tag. Placing the *if-diff* element right above the elements it affects, and specifying "m" accurately, will improve performance and help reduce greenhouse emissions.
4. *if-diff* sets the data-* attribute to "1" when the condition is true, "-1" if not. It is up to the application's css styling to interpret how this should display.
5. If *if-diff* encounters a data-* value of "0", this signifies there's exactly one template inside the DOM element, which needs cloning before changing to "1". It will leave the template untouched if the condition is not satisfied.
6. The "if" attribute / property is actually an active participant in the logical evaluation. If that attribute / property is false, then the evaluation will be false no matter what. And as the demo below indicates, not_equals is also supported.
View on GitHub
GitHub Homepage
Issue tracker
License
Online Demo
Documentation
if-diff version 0.0.1
### Dependencies
Polymer/polymer#^2.0.0
if-diff version 0.0.2
### Dependencies
Polymer/polymer#^2.0.0
if-diff version 0.0.3
### Dependencies
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#polymerelements/test-fixture#^3.0.0-rc.1
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
if-diff version 0.0.4
### Dependencies
* xtal-latx#0.0.60
if-diff version 0.0.5
### Dependencies
* xtal-latx#0.0.60
if-diff version 0.0.6
### Dependencies
* xtal-latx#0.0.60
if-diff version 0.0.7
### Dependencies
* xtal-latx#0.0.60
if-diff version 0.0.9
### Dependencies
* xtal-latx#0.0.60
if-diff version 0.0.10
### Dependencies
* xtal-latx#0.0.62
if-diff version 0.0.11
### Dependencies
* xtal-latx#0.0.63
if-diff version 0.0.12
### Dependencies
* xtal-latx#0.0.68
if-diff version 0.0.13
### Dependencies
* xtal-latx#0.0.69
if-diff version 0.0.14
### Dependencies
* xtal-latx#0.0.69
if-diff version 0.0.15
### Dependencies
* xtal-latx#0.0.76
if-diff version 0.0.16
### Dependencies
* xtal-latx#0.0.76
if-diff version 0.0.17
### Dependencies
* xtal-latx#0.0.85
if-diff version 0.0.18
### Dependencies
* xtal-latx#0.0.88
if-diff version 0.0.19
### Dependencies
* xtal-latx#0.0.88
if-diff version 0.0.20
### Dependencies
* xtal-latx#0.0.88
if-diff version 0.0.21
### Dependencies
* xtal-element#0.0.50
if-diff version 0.0.22
### Dependencies
* xtal-element#0.0.50
* trans-render#0.0.101
if-diff version 0.0.23
### Dependencies
* xtal-element#0.0.54
* trans-render#0.0.102
if-diff version 0.0.24
### Dependencies
* xtal-element#0.0.56
* trans-render#0.0.106
if-diff version 0.0.25
### Dependencies
* xtal-element#0.0.57
* trans-render#0.0.107
if-diff version 0.0.26
### Dependencies
* xtal-element#0.0.58
* trans-render#0.0.110