Polymer iron-media-query not working as previous versions - polymer

Question

The following component used to work in 0.5, but doesn't work in 1.0.
If I uncomment the h1 tag to display the values returned by iron-media-query, then the output is just ",,"; Meaning of course the values are just blank.
<dom-module id="app-image">
<!-- Should select correct image based on size -->
<style>
:host {
display: inline-block;
position: relative;
overflow: hidden;
}
:host > ::content img { display: block; }
</style>
<template>
<iron-media-query query="(min-width: 422px)"
queryMatches="{{ isSmall }}"></iron-media-query>
<iron-media-query query="(min-width: 642px)"
queryMatches="{{ isMedium }}"></iron-media-query>
<iron-media-query query="(min-width: 1202px)"
queryMatches="{{ isLarge }}"></iron-media-query>
<!--
Note: The following is just to see what the actual values are for
the specific variables. Unfortunately, it's all just plain blank :(
<h1><span>{{ isSmall }}</span>, <span>{{ isMedium }}</span>, <span>{{ isLarge }}</span></h1>
-->
<template is="dom-if" if="{{ !isSmall }}">
<content select="[tiny]"></content>
</template>
<template is="dom-if" if="{{ isSmall && !isMedium }}">
<content select="[small]"></content>
</template>
<template is="dom-if" if="{{ isMedium && !isLarge }}">
<content select="[medium]"></content>
</template>
<template is="dom-if" if="{{ isLarge }}">
<content select="[large]"></content>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "app-image",
ready: function() {
console.log(this.isSmall);
console.log(this.isMedium);
console.log(this.isLarge);
}
});
</script>
The 3 console.log statements all return undefined, when I'm expecting boolean values. This leads me to believe that the iron-media-query element doesn't actually update the property.
Should iron-media-query be used differently than it's previous incarnation, core-media-query? Is the documentation correct?
ta,

Answer 1

Rewrite queryMatches to query-matches.