I'm building a website (not a single page app) which uses Polymer Elements. The website "app" is not contained in a <dom-module>, but I still want to make use of the <app-route> element.
How can I do that without creating a custom "app-element" that contains the entire site (I tried putting it all into a <dom-module> but got loads of errors)?
If I simply use <app-route> and <app-location> within the <body> tag I get a
Uncaught TypeError: Cannot read property 'length' of undefined
even if I try binding the route/data/tail attributes programmatically instead of using e.g. route="{{route}}".
Polymer elements that do not sit within a context of another Polymer managed element are seen from the perspective of a browser simply as custom tags. Each of them is encapsulated and has their own separate internal context and by design elements do not interact with external context other than by sending events.
Polymer implements a mediator pattern so elements are not communicating directly even though it may appear so but instead there are various observers set up implicilty. Thus to make that communication to actually happen you need to make sure that your elements are wrapped in some kind of Polymer-managed element - which in your case may be as pointed out by Kuba Šimonovský a
dom-bindhelper element.If for whatever reason you do not want to use that element you may implement your own event driven mediator for your elements (not really recommended).