Polymer iron-media-query not working as previous versions

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.