Polymer how to get scope from other page - polymer

Question

how to get scope from other page in iron-page, i'm using the starter-kit polymer, i need get the scope for exec a method in these view
my-app.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="my-icons.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
<a name="el1" href="/el1">Element 1</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div> <paper-icon-button icon="polymer" on-click="openToast" ></paper-icon-button>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-el1 name="el1"></my-el1>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
},
observers: [
'_routePageChanged(routeData.page)',
],
_routePageChanged: function(page) {
this.page = page || 'view1';
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
openToast: function() {
console.info('here open the toast');
//open toast
}
});
</script>
</dom-module>
my toast in this element <my-el1 name="el1"></my-el1>
my-el1.html
<!-- POLYMER CORE -->
<link rel="import" href="../bower_components/polymer/polymer.html" />
<!-- PAPER ELEMENT -->
<link rel="import" href="../bower_components/paper-toast/paper-toast.html" />
<dom-module id="my-el1">
<template>
<style is="custom-style">
</style>
<paper-toast id="toastr" duration="0" text="Hello world!"></paper-toast>
</template>
<script>
Polymer({
is : 'my-el1'
});
</script>
</dom-module>
need show this toast from <paper-icon-button icon="polymer" on-click="openToast" > this button is my-app.html the parent element

Answer 1

You must retrieve a reference to the my-el1 dom node and it's internal paper toast.
Here's an example:
openToast: function() {
var el1 = this.$$('my-el1[name="el1"]');
el1.$.toastr.open();
}
I do find this problematic though as it defeats the purpose of encapsulation.
Another approach is providing my-el1 a method (I much prefer via attribute but this could also work) to show the paper-toast.
On your my-el1:
Polymer({
is : 'my-el1',
openToast: function() {
this.$.toastr.opened = true; // or this.$.toastr.open()
}
});
And on your my-app:
Polymer({
is: 'my-app',
...
openToast: function() {
var el1 = this.$$('my-el1[name="el1"]'); // or better yet, give an id to my-el1 so you can just refer it using this.$
el1.openToast();
}
});