connectedCallback（）休息Polymer 2.x Plunk

Question

为什么connectedCallback()打破我的Plunk？ Comment and uncomment it in this demo to see what I mean.我在做什么错？

https://plnkr.co/edit/f4X7aZYj1MHSIjPttygH?p=preview

我-demo.html

<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> 
<link rel="import" href="polymer/polymer-element.html"> 
<link rel="import" href="paper-toggle-button/paper-toggle-button.html"> 


<dom-module id="my-demo"> 
    <template> 
    <style> 
     :host > * { 
     margin-top: 40px; 
     font-size: 18px; 
     } 

     button.save { 
     background-color: blue; 
     color: white; 
     margin-left: 12px; 
     } 
    </style> 

    <paper-toggle-button checked="{{item.alice}}">Alice</paper-toggle-button> 
    <paper-toggle-button checked="{{item.bob}}">Bob</paper-toggle-button> 
    <paper-toggle-button checked="{{item.charlie}}">Charlie</paper-toggle-button> 
    <paper-toggle-button checked="{{item.dave}}">Dave</paper-toggle-button> 

    <button on-tap="_reset">Reset</button> 
    <button class="save">Save</button> 

    </template> 

    <script> 
    class MyDemo extends Polymer.Element { 
     static get is() { 
     return 'my-demo'; 
     } 
     static get properties() { 
     return { 
      item: { 
      type: Object, 
      notify: true, 
      value:() => { 
       return { 
       alice: false, 
       bob: true, 
       charlie: false, 
       dave: true, 
       }; 
      }, 
      }, 
      oldItem: { 
      type: Object, 
      notify: true, 
      }, 
     }; 
     } 

     constructor() { 
     super(); 
     } 

     ready() { 
     super.ready(); 
     this.set('active', false); 
     this.set('oldItem', this.item); 
     //console.log('oldItem', this.oldItem); 
     } 

     // Uncomment the connectedCallback() 
     // to see all the buttons go away 
     // connectedCallback() {} 

     static get observers() { 
     return [ 
      '_itemChanged(item.*)', 
     ]; 
     } 

     _saveItem(o) { 
     //console.log("new-item", o); 
     } 

     _itemChanged(newItem) { 
     //console.log('newItem', newItem); 
     //console.log('oldItem', this.oldItem); 
     this.set('active', true); 
     //console.log('active', this.active); 
     } 
    } 

    window.customElements.define(MyDemo.is, MyDemo); 
    </script> 
</dom-module> 

编辑：Here is a demo of the accepted answer.

Answer 1

你需要调用super.connectedCallback();你connectedCallback() { ... }里面，否则原来的功能不会被调用。