Polymer 2.0 using Shady DOM document.getElementByID() - polymer

Question

I am using the Shady DOM in Polymer 2.0 by using the following script
<script>window.ShadyDOM = {force:true};</script>
I have created three custom element logon-email, logon-password and logon-button. When the paper-button is clicked I would like to get the values of the paper-inputs of logon-email and login-password. Using Polymer 1.0 I have used document.getElementById('#emailLogon').value to get the value from another custom element but this returns null in Polymer 2.0 using Shady DOM.
If what I am doing is now not possible what is the alternative to retrieving values from external custom elements from another custom element.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<dom-module id="logon-email">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-input {
--paper-input-container-input-color: white;
--paper-input-container-label: { color: white; font-size: 12px};
}
.email_label {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 12px;
color: white;
}
</style>
<div class="email_label">Email</div>
<paper-input label="Please enter your email address" no-label-float></paper-input>
</template>
<script>
class LogonEmail extends Polymer.Element {
static get is() { return 'logon-email'; }
}
window.customElements.define(LogonEmail.is, LogonEmail);
</script>
</dom-module>
<dom-module id="logon-password">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-input {
--paper-input-container-input-color: white;
--paper-input-container-label: { color: white; font-size: 12px; };
}
.password_label {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 12px;
color: white;
}
</style>
<div class="password_label">Password</div>
<paper-input id="logonPassword" label="Please enter your password" type="password" no-label-float></paper-input>
</template>
<script>
class LogonPassword extends Polymer.Element {
static get is() { return 'logon-password'; }
}
window.customElements.define(LogonPassword.is, LogonPassword);
</script>
</dom-module>
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-styles/color.html">
<dom-module id="logon-button">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-button {
font-family: 'Roboto', 'Noto', sans-serif;
font-weight: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
paper-button.green {
background-color: var(--paper-green-500);
color: white;
margin: auto;
width: 100%;
}
</style>
<paper-button on-click="handleLoginClick" raised class="green">Login</paper-button
</template>
<script>
class LogonButton extends Polymer.Element {
static get is() { return 'logon-button'; }
connectedCallback() {
super.connectedCallback();
}
handleLoginClick(){
console.log('Login button clicked');
var loginEmail = document.getElementById('#logonEmail');
console.log('logonEmail ' + loginEmail);
}
}
window.customElements.define(LogonButton.is, LogonButton);
</script>
</dom-module>

Answer 1

This is the most easy approach at polymer to pass value between elements. So just define the property and set it notify:true to reflect at other elements as fallow :
<paper-input label="Please enter your email address" no-label-float value="{{emailVal}}"></paper-input>
At main document pass emailVal property to your custom elements so you have property in all 3 element like this.emailVal
<logon-email email-val="{{emailVal}}"></logon-email>
<logon-password email-val="{{emailVal}}"></logon-password>
<logon-button email-val="{{emailVal}}"></logon-button>
And define this property in logon-email element and set it notify : true to reflect all property in any changes.
at logon-email
static get properties() { return {
emailVal:{
type:String,
notify:true
},...
and at logon-button element:
handleLoginClick(){
console.log('Login button clicked');
console.log('logonEmail ', this.emailVal);
}
Hope clear .