当我在第一个元素将我的聚合物项目升级到2.0时，我收到错误 未捕获（承诺）DOMException：无法在“Node”上执行“appendChild”：新的子元素包含父元素
我尝试了混合风格和2.0风格的元素。
这是我的元素代码
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html">-->
<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->
<!--<link rel="import" href="../../bower_components/paper-button/paper-button.html">-->
<!--<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
<!--<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="import" href="../../elements/elements.html">
<!--<script src="https://apis.google.com/js/platform.js"></script>-->
<!--<meta name="google-signin-client_id" content=" 747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com">-->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<dom-module id="log-in">
<template>
<custom-style>
<style>
#card{
width: 50%;
height: 50%;
padding-top: 25%;
padding-left: 25%;
}
@media (max-width:425px) {
paper-material {
width: 80%;
/*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.loginHead{
/*padding-top: 14%;*/
color: rgb(63,81,181);
font-weight: bold;
font-size: large;
align-self: flex-start;
padding-left: 4%;
}
.logoAndHead{
padding-left: 23%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 9%;
}
}
@media (min-width: 426px) {
paper-material {
width: 50%;
/*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.loginHead{
color: rgb(63,81,181);
/*padding-top: 9%;*/
font-weight: bold;
font-size: large;
align-self: flex-start;
padding-left: 2%;
}
}
@media (min-width: 426px)and (max-width: 1000px){
.logoAndHead{
padding-left: 33%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 7%;
}
}
@media (min-width: 1001px) and (max-width: 2000px){
.logoAndHead{
padding-left: 37%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 5%;
}
}
@media (min-width: 2001px) {
.logoAndHead{
padding-left: 45%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 2%;
}
}
.egluImg{
/*float: left;*/
}
.egluImg>img{
height: 45px;
width: 51px;
}
paper-input{
width: 100%;
}
paper-button{
color: white;
background-color:rgb(63,81,181) ;
}
.logo{
padding-bottom: 4%;
}
a{
color: rgb(107, 106, 106);
}
.loginText{
color: rgb(63,81,181);
font-size: large;
font-weight: bolder;
align-self: flex-end;
padding-left: 2%;
}
img{
vertical-align: middle;
}
</style>
</custom-style>
<div class="loginContainer">
<paper-material elevation="1">
<div class="logo">
<div class="logoAndHead">
<span class="egluImg" style="float: left">
<img src="../../images/eglu-logo.jpg" >
</span>
<div class="layout horizontal wrap headText">
<span class="loginHead">
<img src="../../images/logo_text.svg" >
</span>
<span class="loginText">Login</span>
</div>
</div>
<!--<center>-->
<div style="padding-left: 8%;padding-right: 8%">
<paper-input label="User Name" value="{{userName}}"></paper-input>
<paper-input type="password" on-keypress="enterAccount" id="password" label="Password" value="{{password}}"></paper-input>
<!--<i class="material-icons" on-click="_showHide" id="eye">visibility_off</i>-->
<div>
<paper-button id="loginButton" raised on-click="sendRequest">Log in</paper-button>
</div>
<div style="padding-top: 2px">
<a href="https://myeglu.com/oauth/forgot-password.html">Forgot Password?</a>
<br>
</div>
</div>
<!--</center>-->
<!--<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>-->
</div>
</paper-material> <!--<google-signin client-id="747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/drive"></google-signin>-->
</div>
<div style="text-align: center">
<paper-toast id="errToast"></paper-toast>
</div>
<!--<google-signin-aware-->
<!--id="signin"-->
<!--on-click="_googleSignIn"-->
<!--scopes="https://www.googleapis.com/auth/drive"-->
<!--on-google-signin-aware-success="handleSignin"-->
<!--google-signin-aware-error="handleError">-->
<!--</google-signin-aware>-->
<iron-ajax
id="authenticate"
method="POST"
content-type="application/json"
url="https://staging.myeglu.com/api/v1/customers"
body="{{ajaxBody}}"
handle-as="json"
last-response="{{code}}"
on-error="_handleError"
on-response="_handleResponse">
</iron-ajax>
</template>
<script>
class LogIn extends Polymer.Element{
static get is() {
return "log-in";
}
static get properties() {
return {
userName:{
type:String,
value:'',
notify:true
},
password:{
type:String
},
code:{
type:Object,
notify:true
},
ajaxBody: {
type: String,
computed: 'processBody(userName, password)'
},
integrator:{
type:String,
notify:true,
computed:'setIntegrator(userName)'
},
gResponse:Object
}
}
constructor() {
super();
}
ready(){
super.ready();
}
handleSignin(response){
var user = gapi.auth2.getAuthInstance()['currentUser'].get();
console.log('User name: ' + user.getBasicProfile().getName());
console.log('User token: ' + response.detail.id_token);
}
handleError(){
}
sendRequest(){
// this.$.authenticate.headers={"clientid":"web"};
this.$.authenticate.generateRequest();
}
_showHide(){
var p = this.$.password;
var q=p.getAttribute('type');
if(q=='text'){
p.setAttribute('type','password');
this.$.eye.innerHTML = '<i class="material-icons">visibility_off</i>';
}
if(q=='password'){
p.setAttribute('type','text');
this.$.eye.innerHTML = '<i class="material-icons">visibility</i>';
}
}
processBody(userName, password) {
return JSON.stringify({emailId: userName, password: password,authProvider: "INTERNAL"});
}
_handleResponse(e){
console.log('status'+e.detail.xhr.status);
if(this.code.message=="Login Success"){
var expiry = new Date();
expiry.setTime(expiry.getTime()+(15*24*60*60*1000)); // one week
console.log('it is called');
this.setCookie('token',this.code.token,15);
this.setCookie('loggedIn','yes',15);
this.setCookie('email',this.userName,15);
window.location.href = "/admin/";
// window.location.href = "/";
}
else
window.alert('wrong credentials, Try again');
}
_handleError(e){
if(e.detail.request.xhr.response.message=='Wrong password') {
this.$.errToast.text = 'Wrong Password';
this.$.errToast.show();
}
if(e.detail.request.xhr.response.loginState=='ACCOUNT_NOT_FOUND') {
this.$.errToast.text = 'You are not eGlu User or check your credentials';
this.$.errToast.show();
}
}
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
setIntegrator(userName){
return userName;
}
onSignIn() {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
window.location.href = "../../index.html";
}
onFailure(error) {
alert(error);
}
renderButton () {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
enterAccount(event) {
if (event.keyCode == 13) {
this.$.loginButton.click();
}
}
}
customElements.define(LogIn.is, LogIn);
</script>
</dom-module>
我已经和这个问题斗争了好几天，有人帮我解决了。 提前谢谢。