query-params in <app-route> element of polymer

Bind to <app-location>.queryParams to get the query parameters:

<app-location route="{{route}}" query-params="{{queryParams}}">

Note also that <app-location>.route has an internal property that contains the query parameters: __queryParams. Technically, you could use that with the caveat of it possibly being unusable in the next release. (i.e., this.route.__queryParams === this.queryParams).

codepen

The reason you get the answer you do is that the url is wrong. The # part comes at the end.

Try url

localhost:8080/?foo=bar&baz=qux#/test

The clue is in the page parameter where it appears that the query params have been added to the page parameter. They haven't, but the browser just thinks they are part of the hash and passes them over in window.location.hash. app-location parsing of the hash part splits on '/' so thinks the whole thing is part of the :page pattern.