Paper-toast not showing - polymer

Question

I am trying to display a toast when an ajax request fails using core-ajax and paper-toast elements. I created an handler that calls show on the paper-toast element. However it is still not showing...
What am I doing wrong?
Is there a better way to do that? (Maybe having the same toast element for all the application messages)
Here it follows my custom element code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<polymer-element name="fd-rest-element-service" attributes="fditems fdtype">
<template>
<style>
:host {
display: block;
}
paper-toast {
z-index: 1000;
bottom: 40px;
left: 10px;
}
</style>
<paper-toast id="toast" text="There was a problem loading {{fdtype}} data.">
</paper-toast>
<core-ajax id="ajax"
auto on-core-error="{{errorHandler}}"
url="https://wrong.url.com:9113/{{fdtype}}/"
disabled-on-core-response="{{elementsLoaded}}"
response="{{fditems}}"
handleAs="json" withCredentials >
</core-ajax>
</template>
<script>
Polymer('fd-rest-element-service', {
fdtype:'environments',
created: function() {
this.fditems = [];
},
elementsLoaded: function() {
// Make a copy of the loaded data
console.log(this.fdtype +" : "+ this.$.ajax.response);
this.fditems = this.$.ajax.response.slice(0);
},
errorHandler: function(event){
console.log(event);
console.log(this.$.toast);
this.$.toast.show();
}
});
</script>
</polymer-element>
Since I have got no console error and the logged objects are as expected I believe the problem arises because the element is used inside an element managed by core-animated-pages that is not displayed. Any suggestion on how to create a shared toast element that can be accessed by the other elements in my application?

Answer 1

I ended up creating the paper-toast element inside the outmost element and then pass it through the children element via a toast attribute.
Here it follows some sample code. In my root element I created a paper-toast element referenced by id and share "top-down" in the other inner elements.
<paper-toast
id="toast"
text="There was a problem loading data.">
</paper-toast>
<fow-login user="{{user}}" userPhoto="{{userPhoto}}"
class="loginButton"
toast="{{$.toast}}"
token="{{token}}">
</fow-login>
In my inner element I use it like this:
<polymer-element name="fow-login" attributes="toast user userPhoto globals appID token">
...
<script>
...
loginFail: function(event){
console.log("Error:", event);
if(this.toast){
this.toast.text="There was a login problem.";
this.toast.show();
}
},
...
</script>
</polymer-element>