javascriptpolymerpolymer-2.xplunker

connectedCallback() breaks Polymer 2.x Plunk


Why does connectedCallback() break my Plunk? Comment and uncomment it in this demo to see what I mean. What am I doing wrong?

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

my-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>

Edit: Here is a demo of the accepted answer.


Solution

  • You need to call the super.connectedCallback(); inside your connectedCallback() { ... }, otherwise the original function is never called.