title: Failed to execute 'appendChild' on 'Node': The new child element contains the parent
body: <p>While i am upgrading my polymer project to 2.0 at very first element i am getting the error
  <strong>Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent</strong></p>
  
  <p>I tried the element in both hybrid style and 2.0 style.</p>
  
  <p>Here is my element code </p>
  
  <pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../../bower_components/polymer/polymer-element.html"&gt;
  &lt;!--&lt;link rel="import" href="../../bower_components/paper-material/paper-material.html"&gt;--&gt;
  &lt;!--&lt;link rel="import" href="../../bower_components/paper-input/paper-input.html"&gt;--&gt;
  &lt;!--&lt;link rel="import" href="../../bower_components/paper-button/paper-button.html"&gt;--&gt;
  &lt;!--&lt;link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"&gt;--&gt;
  &lt;!--&lt;link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html"&gt;--&gt;
  
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  
  &lt;link rel="import" href="../../elements/elements.html"&gt;
  
  &lt;!--&lt;script src="https://apis.google.com/js/platform.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;meta name="google-signin-client_id" content=" 747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com"&gt;--&gt;
  
  &lt;link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"&gt;
  &lt;script defer src="https://code.getmdl.io/1.3.0/material.min.js"&gt;&lt;/script&gt;
  
  &lt;dom-module id="log-in"&gt;
    &lt;template&gt;
      &lt;custom-style&gt;
    &lt;style&gt;
    #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&gt;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;
      }
  
    &lt;/style&gt;
  
      &lt;/custom-style&gt;
  
  
          &lt;div class="loginContainer"&gt;
  
            &lt;paper-material elevation="1"&gt;
              &lt;div class="logo"&gt;
            &lt;div class="logoAndHead"&gt;
              &lt;span class="egluImg" style="float: left"&gt;
                &lt;img src="../../images/eglu-logo.jpg" &gt;
              &lt;/span&gt;
              &lt;div class="layout horizontal wrap headText"&gt;
              &lt;span class="loginHead"&gt;
                &lt;img src="../../images/logo_text.svg" &gt;
              &lt;/span&gt;
              &lt;span class="loginText"&gt;Login&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!--&lt;center&gt;--&gt;
                &lt;div style="padding-left: 8%;padding-right: 8%"&gt;
  
                &lt;paper-input label="User Name" value="{{userName}}"&gt;&lt;/paper-input&gt;
  
                  &lt;paper-input type="password" on-keypress="enterAccount" id="password" label="Password" value="{{password}}"&gt;&lt;/paper-input&gt;
                  &lt;!--&lt;i class="material-icons" on-click="_showHide" id="eye"&gt;visibility_off&lt;/i&gt;--&gt;
                  &lt;div&gt;
                    &lt;paper-button id="loginButton" raised on-click="sendRequest"&gt;Log in&lt;/paper-button&gt;
                  &lt;/div&gt;
  
  
              &lt;div style="padding-top: 2px"&gt;
                &lt;a href="https://myeglu.com/oauth/forgot-password.html"&gt;Forgot Password?&lt;/a&gt;
                &lt;br&gt;
              &lt;/div&gt;
                &lt;/div&gt;
            &lt;!--&lt;/center&gt;--&gt;
            &lt;!--&lt;div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"&gt;&lt;/div&gt;--&gt;
          &lt;/div&gt;
            &lt;/paper-material&gt; &lt;!--&lt;google-signin client-id="747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/drive"&gt;&lt;/google-signin&gt;--&gt;
  
  
          &lt;/div&gt;
      &lt;div style="text-align: center"&gt;
          &lt;paper-toast id="errToast"&gt;&lt;/paper-toast&gt;
      &lt;/div&gt;
  
        &lt;!--&lt;google-signin-aware--&gt;
          &lt;!--id="signin"--&gt;
          &lt;!--on-click="_googleSignIn"--&gt;
          &lt;!--scopes="https://www.googleapis.com/auth/drive"--&gt;
          &lt;!--on-google-signin-aware-success="handleSignin"--&gt;
          &lt;!--google-signin-aware-error="handleError"&gt;--&gt;
        &lt;!--&lt;/google-signin-aware&gt;--&gt;
  
      &lt;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"&gt;
  
      &lt;/iron-ajax&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      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 = '&lt;i class="material-icons"&gt;visibility_off&lt;/i&gt;';
          }
          if(q=='password'){
            p.setAttribute('type','text');
            this.$.eye.innerHTML = '&lt;i class="material-icons"&gt;visibility&lt;/i&gt;';
          }
        }
        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);
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>i have been fighting with this problem for days, someone help me solve it.
  Thanks in advance.</p>