From d5e0043abcb2c557fbadc5f7535033a5a03e28c1 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 6 Nov 2018 15:59:23 -0800
Subject: [PATCH] Manually merge changes from #5418

---
 lib/legacy/class.js                | 154 ++++----
 lib/legacy/legacy-element-mixin.js |   7 +-
 test/unit/behaviors.html           | 562 ++++++++++++++------------
 test/unit/mixin-behaviors.html     | 611 ++++++++++++++++-------------
 4 files changed, 733 insertions(+), 601 deletions(-)

diff --git a/lib/legacy/class.js b/lib/legacy/class.js
index a4c4d576da..05ad6b2f3b 100644
--- a/lib/legacy/class.js
+++ b/lib/legacy/class.js
@@ -20,20 +20,20 @@ const metaProps = {
   attributeChanged: true,
 };
 
-const noBehaviorCopyProps = Object.assign({
+const excludeProps = Object.assign({
   behaviors: true
 }, metaProps);
 
-const memoizedProps = Object.assign({
+const lifecycleProps = Object.assign({
   listeners: true,
   hostAttributes: true
 }, metaProps);
 
 function copyProperties(source, target) {
   for (let p in source) {
-    // NOTE: cannot copy `noBehaviorCopyProps` methods onto prototype at least because
+    // NOTE: cannot copy `excludeProps` methods onto prototype at least because
     // `super.ready` must be called and is not included in the user fn.
-    if (!(p in noBehaviorCopyProps)) {
+    if (!(p in excludeProps)) {
       let pd = Object.getOwnPropertyDescriptor(source, p);
       if (pd) {
         Object.defineProperty(target, p, pd);
@@ -91,24 +91,18 @@ export function mixinBehaviors(behaviors, klass) {
 // If lifecycle is called (super then me), order is
 // (1) C.created, (2) A.created, (3) B.created, (4) element.created
 // (again same as 1.x)
-function copyBehaviorProperties(behaviors, klass) {
-  const meta = {};
-  const superMeta = klass.prototype.__behaviorMetaProps;
-  if (behaviors) {
-    klass.prototype.__behaviorMetaProps = meta;
-    for (let i=0; i<behaviors.length; i++) {
-      copyProperties(behaviors[i], klass.prototype);
-      memoizeBehaviorMetaProps(meta, behaviors[i], superMeta);
-    }
+function applyBehaviors(proto, behaviors, lifecycle) {
+  for (let i=0; i<behaviors.length; i++) {
+    applyInfo(proto, behaviors[i], lifecycle);
   }
-  klass.prototype.__behaviorMetaProps = meta;
 }
 
-function memoizeBehaviorMetaProps(meta, behavior, superMeta) {
-  for (let p in memoizedProps) {
-    if (behavior[p]) {
-      meta[p] = meta[p] || (superMeta && superMeta[p] ? superMeta[p].slice() : []);
-      meta[p].push(behavior[p]);
+function applyInfo(proto, info, lifecycle) {
+  copyProperties(info, proto);
+  for (let p in lifecycleProps) {
+    if (info[p]) {
+      lifecycle[p] = lifecycle[p] || [];
+      lifecycle[p].push(info[p]);
     }
   }
 }
@@ -178,13 +172,38 @@ function mergePropertyInfo(a, b) {
   }
 }
 
-function mergeProperties(a, b) {
+// Note, the properties in `b` are normalized before being merged
+// into `a`. This means that given `a == {}` and `b == {foo: String}`,
+// the result is `a == {foo: {type: String}}`.
+function mergeElementProperties(a, b) {
   for (let p in b) {
     a[p] = a[p] || {};
     mergePropertyInfo(a[p], b[p]);
   }
 }
 
+/* Note about construction and extension of legacy classes.
+  [Changed in Q4 2018 to optimize performance.]
+
+  When calling `Polymer` or `mixinBehaviors`, the generated class below is
+  made. The list of behaviors was previously made into one generated class per
+  behavior, but this is no longer the case as behaviors are now called
+  manually. Note, there may *still* be multiple generated classes in the
+  element's prototype chain if extension is used with `mixinBehaviors`.
+
+  The generated class is directly tied to the info object and behaviors
+  used to create it. That list of behaviors is filtered so it's only the
+  behaviors not active on the superclass. In order to call through to the
+  entire list of lifecycle methods, it's important to call `super`.
+
+  The element's `properties`, `observers`, and the `_registered` method
+  are controlled via the finalization mechanism provided by `PropertiesMixin`.
+
+  `Properties` and `observers` are collected by manually traversing the prototype
+  chain and merging. The `_registered` method is called via
+  `LegacyElementMixin._finalizeClass`.
+
+*/
 /**
  * @param {!PolymerInit} info Polymer info object
  * @param {function(new:HTMLElement)} Base base class to extend with info object
@@ -195,25 +214,30 @@ function mergeProperties(a, b) {
  */
 function GenerateClassFromInfo(info, Base, behaviors) {
 
+  // manages behavior and lifecycle processing (filled in after class definition)
+  let behaviorList;
+  const lifecycle = {};
+
   /** @private */
   class PolymerGenerated extends Base {
+
     static get properties() {
       const properties = {};
-      if (this.prototype.__behaviors) {
-        for (let i=0, b; i < this.prototype.__behaviors.length; i++) {
-          b = this.prototype.__behaviors[i];
-          mergeProperties(properties, b.properties);
+      if (behaviorList) {
+        for (let i=0, b; i < behaviorList.length; i++) {
+          b = behaviorList[i];
+          mergeElementProperties(properties, b.properties);
         }
       }
-      mergeProperties(properties, info.properties);
+      mergeElementProperties(properties, info.properties);
       return properties;
     }
 
     static get observers() {
       let observers = [];
-      if (this.prototype.__behaviors) {
-        for (let i=0, b; i < this.prototype.__behaviors.length; i++) {
-          b = this.prototype.__behaviors[i];
+      if (behaviorList) {
+        for (let i=0, b; i < behaviorList.length; i++) {
+          b = behaviorList[i];
           if (b.observers) {
             observers = observers.concat(b.observers);
           }
@@ -229,15 +253,13 @@ function GenerateClassFromInfo(info, Base, behaviors) {
      * @return {void}
      */
     created() {
-      const list = this.__behaviorMetaProps.created;
+      super.created();
+      const list = lifecycle.created;
       if (list) {
         for (let i=0; i < list.length; i++) {
           list[i].call(this);
         }
       }
-      if (info.created) {
-        info.created.call(this);
-      }
     }
 
     /**
@@ -253,37 +275,30 @@ function GenerateClassFromInfo(info, Base, behaviors) {
         `is` in `beforeRegister` as you could in 1.x.
       */
       const proto = this;
-      if (proto.hasOwnProperty('__behaviors')) {
-        copyBehaviorProperties(proto.__behaviors, proto.constructor);
+      if (behaviorList) {
+        applyBehaviors(proto, behaviorList, lifecycle);
       }
-      proto.__behaviorMetaProps = proto.__behaviorMetaProps || {};
-      copyProperties(info, proto);
-      // Note, previously these were interleaved.
-      let list = proto.__behaviorMetaProps.beforeRegister;
+      applyInfo(proto, info, lifecycle);
+      let list = lifecycle.beforeRegister;
       if (list) {
         for (let i=0; i < list.length; i++) {
           list[i].call(proto);
         }
       }
-      list = proto.__behaviorMetaProps.registered;
+      list = lifecycle.registered;
       if (list) {
         for (let i=0; i < list.length; i++) {
           list[i].call(proto);
         }
       }
-      if (info.beforeRegister) {
-        info.beforeRegister.call(proto);
-      }
-      if (info.registered) {
-        info.registered.call(proto);
-      }
     }
 
     /**
      * @return {void}
      */
     _applyListeners() {
-      const list = this.__behaviorMetaProps.listeners;
+      super._applyListeners();
+      const list = lifecycle.listeners;
       if (list) {
         for (let i=0; i < list.length; i++) {
           const listeners = list[i];
@@ -294,11 +309,6 @@ function GenerateClassFromInfo(info, Base, behaviors) {
           }
         }
       }
-      if (info.listeners) {
-        for (let l in info.listeners) {
-          this._addMethodEventListenerToNode(this, l, info.listeners[l]);
-        }
-      }
     }
 
     // note: exception to "super then me" rule;
@@ -308,12 +318,7 @@ function GenerateClassFromInfo(info, Base, behaviors) {
      * @return {void}
      */
     _ensureAttributes() {
-      if (info.hostAttributes) {
-        for (let a in info.hostAttributes) {
-          this._ensureAttribute(a, info.hostAttributes[a]);
-        }
-      }
-      const list = this.__behaviorMetaProps.hostAttributes;
+      const list = lifecycle.hostAttributes;
       if (list) {
         for (let i=list.length-1; i >= 0; i--) {
           const hostAttributes = list[i];
@@ -322,6 +327,7 @@ function GenerateClassFromInfo(info, Base, behaviors) {
             }
         }
       }
+      super._ensureAttributes();
     }
 
     /**
@@ -329,49 +335,41 @@ function GenerateClassFromInfo(info, Base, behaviors) {
      */
     ready() {
       super.ready();
-      let list = this.__behaviorMetaProps.ready;
+      let list = lifecycle.ready;
       if (list) {
         for (let i=0; i < list.length; i++) {
           list[i].call(this);
         }
       }
-      if (info.ready) {
-        info.ready.call(this);
-      }
     }
 
     /**
      * @return {void}
      */
     attached() {
-      let list = this.__behaviorMetaProps.attached;
+      super.attached();
+      let list = lifecycle.attached;
       if (list) {
         for (let i=0; i < list.length; i++) {
           list[i].call(this);
         }
       }
-      if (info.attached) {
-        info.attached.call(this);
-      }
     }
 
     /**
      * @return {void}
      */
     detached() {
-      let list = this.__behaviorMetaProps.detached;
+      super.detached();
+      let list = lifecycle.detached;
       if (list) {
         for (let i=0; i < list.length; i++) {
           list[i].call(this);
         }
       }
-      if (info.detached) {
-        info.detached.call(this);
-      }
     }
 
     /**
-     *
      * Implements native Custom Elements `attributeChangedCallback` to
      * set an attribute value to a property via `_attributeToProperty`.
      *
@@ -381,20 +379,17 @@ function GenerateClassFromInfo(info, Base, behaviors) {
      * @return {void}
      */
     attributeChanged(name, old, value) {
-      let list = this.__behaviorMetaProps.attributeChanged;
+      super.attributeChanged();
+      let list = lifecycle.attributeChanged;
       if (list) {
         for (let i=0; i < list.length; i++) {
           list[i].call(this, name, old, value);
         }
       }
-      if (info.attributeChanged) {
-        info.attributeChanged.call(this, name, old, value);
-      }
     }
-
   }
 
-  // apply behaviors
+  // apply behaviors, note actual copying is done lazily at first instance creation
   if (behaviors) {
     // NOTE: ensure the behavior is extending a class with
     // legacy element api. This is necessary since behaviors expect to be able
@@ -402,12 +397,11 @@ function GenerateClassFromInfo(info, Base, behaviors) {
     if (!Array.isArray(behaviors)) {
       behaviors = [behaviors];
     }
-    let superBehaviors = PolymerGenerated.prototype.behaviors;
+    let superBehaviors = Base.prototype.behaviors;
     // get flattened, deduped list of behaviors *not* already on super class
-    behaviors = flattenBehaviors(behaviors, null, superBehaviors);
+    behaviorList = flattenBehaviors(behaviors, null, superBehaviors);
     PolymerGenerated.prototype.behaviors = superBehaviors ?
-      superBehaviors.concat(behaviors) : behaviors;
-    PolymerGenerated.prototype.__behaviors = behaviors;
+      superBehaviors.concat(behaviors) : behaviorList;
   }
 
   PolymerGenerated.generatedFrom = info;
diff --git a/lib/legacy/legacy-element-mixin.js b/lib/legacy/legacy-element-mixin.js
index d3ffdcba7e..188106bf50 100644
--- a/lib/legacy/legacy-element-mixin.js
+++ b/lib/legacy/legacy-element-mixin.js
@@ -92,7 +92,12 @@ export const LegacyElementMixin = dedupingMixin((base) => {
     }
 
     static _finalizeClass() {
-      this.prototype._registered();
+      // Note, call `_registered` only if this specific prototype has
+      // an implementation; this ensures `_registered` is not called
+      // on extenders that do not implement it.
+      if (this.prototype.hasOwnProperty('_registered')) {
+        this.prototype._registered();
+      }
       super._finalizeClass();
     }
 
diff --git a/test/unit/behaviors.html b/test/unit/behaviors.html
index 50a03860bb..0451a95407 100644
--- a/test/unit/behaviors.html
+++ b/test/unit/behaviors.html
@@ -30,316 +30,348 @@
   </dom-module>
 
   <script type="module">
-import { Polymer, html } from '../../polymer-legacy.js';
-window.BehaviorA = {
-  properties: {
-
-    label: {
-      type: String,
-      observer: '_labelChanged'
-    },
-
-    hasOptionsA: {
-      readOnly: true,
-      notify: true
-    },
-
-    overridableProperty: {
-      value: false
-    },
+    import { Polymer, html } from '../../polymer-legacy.js';
+    window.BehaviorA = {
+      properties: {
+
+        label: {
+          type: String,
+          observer: '_labelChanged'
+        },
+
+        hasOptionsA: {
+          readOnly: true,
+          notify: true
+        },
+
+        overridableProperty: {
+          value: false
+        },
 
-    overridablePropertyB: {
-      value: false
-    },
+        overridablePropertyB: {
+          value: false
+        },
 
-    hasBehaviorA: {
-      value: true
-    },
+        hasBehaviorA: {
+          value: true
+        },
 
-    computeADependency: {
-      value: true
-    },
+        computeADependency: {
+          value: true
+        },
 
-    computeA: {
-      computed: '_computeProp(computeADependency)'
-    }
-  },
+        computeA: {
+          computed: '_computeProp(computeADependency)'
+        }
+      },
 
-  _simpleProperty: 'A',
+      _simpleProperty: 'A',
 
-  hostAttributes: {
-    behavior: 'A',
-    element: 'A',
-    user: 'A'
-  },
+      hostAttributes: {
+        behavior: 'A',
+        element: 'A',
+        user: 'A'
+      },
 
-  listeners: {
-    change: '_changeHandler'
-  },
+      listeners: {
+        change: '_changeHandler'
+      },
 
-  ready: function() {
-    this.__readyA = true;
-  },
+      ready: function() {
+        this.__readyA = true;
+      },
 
-  _labelChanged: function(label) {
-    this.__label = label;
-  },
+      _labelChanged: function(label) {
+        this.__label = label;
+      },
 
-  _changeHandler: function(e) {
-    this.__change = e.detail.value;
-  },
+      _changeHandler: function(e) {
+        this.__change = e.detail.value;
+      },
 
-  _computeProp: function(a) {
-    return a;
-  }
-};
+      _computeProp: function(a) {
+        return a;
+      }
+    };
 
-window.BehaviorB = {
-  properties: {
+    window.BehaviorB = {
+      properties: {
 
-    disabled: {
-      type: Boolean,
-      value: false,
-      observer: '_disabledChanged'
-    },
+        disabled: {
+          type: Boolean,
+          value: false,
+          observer: '_disabledChanged'
+        },
 
-    hasOptionsB: {
-      readOnly: true,
-      notify: true
-    },
+        hasOptionsB: {
+          readOnly: true,
+          notify: true
+        },
 
-    hasBehaviorB: {
-      value: true
-    },
+        hasBehaviorB: {
+          value: true
+        },
 
-    overridablePropertyB: {
-      value: true
-    },
+        overridablePropertyB: {
+          value: true
+        },
 
-    computeADependencyDependency: {
-      value: 'hi'
-    },
+        computeADependencyDependency: {
+          value: 'hi'
+        },
 
-    computeADependency: {
-      computed: '_computeProp(computeADependencyDependency)'
-    }
+        computeADependency: {
+          computed: '_computeProp(computeADependencyDependency)'
+        }
 
-  },
+      },
 
-  hostAttributes: {
-    behavior: 'B',
-    element: 'B',
-    user: 'B'
-  },
+      hostAttributes: {
+        behavior: 'B',
+        element: 'B',
+        user: 'B'
+      },
 
-  _simpleProperty: 'B',
+      _simpleProperty: 'B',
 
-  _disabledChanged: function(disabled) {
-    this.__disabled = disabled;
-  },
+      _disabledChanged: function(disabled) {
+        this.__disabled = disabled;
+      },
 
-  ready: function() {
-    this.__readyB = true;
-  },
-};
+      ready: function() {
+        this.__readyB = true;
+      },
+    };
 
-window.BehaviorC = {
+    window.BehaviorC = {
 
-  properties: {
+      properties: {
 
-    hasBehaviorC: {
-      value: true
-    }
+        hasBehaviorC: {
+          value: true
+        }
 
-  },
+      },
 
-  _simpleProperty: 'C'
-};
+      _simpleProperty: 'C'
+    };
 
-window.BehaviorD = {
+    window.BehaviorD = {
 
-  properties: {
+      properties: {
 
-    hasBehaviorD: {
-      value: true
-    }
+        hasBehaviorD: {
+          value: true
+        }
 
-  },
-  _simpleProperty: 'D'
+      },
+      _simpleProperty: 'D'
 
-};
+    };
 
-Polymer({
-  is: 'single-behavior',
+    Polymer({
+      is: 'single-behavior',
 
-  behaviors: [
-    window.BehaviorA
-  ],
+      behaviors: [
+        window.BehaviorA
+      ],
 
-  properties: {},
-  observers: [],
-  hostAttributes: {},
-  listeners: {}
-});
+      properties: {},
+      observers: [],
+      hostAttributes: {},
+      listeners: {}
+    });
 
-Polymer({
-  is: 'multi-behaviors',
+    Polymer({
+      is: 'multi-behaviors',
 
-  behaviors: [
-    window.BehaviorA,
-    window.BehaviorB
-  ],
+      behaviors: [
+        window.BehaviorA,
+        window.BehaviorB
+      ],
 
-  hostAttributes: {
-    element: 'element'
-  },
+      hostAttributes: {
+        element: 'element'
+      },
 
-  properties: {
+      properties: {
 
-    foo: {
-      type: String,
-      reflectToAttribute: true,
-      readOnly: true,
-      observer: '_fooChanged'
-    },
+        foo: {
+          type: String,
+          reflectToAttribute: true,
+          readOnly: true,
+          observer: '_fooChanged'
+        },
 
-    overridableProperty: {
-      value: true
-    }
+        overridableProperty: {
+          value: true
+        }
 
-  },
+      },
 
-  _fooChanged: function(foo) {
-    this.__foo = foo;
-  },
-});
+      _fooChanged: function(foo) {
+        this.__foo = foo;
+      },
+    });
 
-Polymer({
-  is: 'nested-behaviors',
+    Polymer({
+      is: 'nested-behaviors',
 
-  behaviors: [
-    [window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA],
-    [window.BehaviorD]
-  ]
-});
+      behaviors: [
+        [window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA],
+        [window.BehaviorD]
+      ]
+    });
 
-window.registerBehavior1 ={
-  beforeRegister: function() {
-    this._createPropertyObserver('beforeProp', 'beforePropChanged1');
-    this.beforeRegisterCount++;
-    this.beforeRegisterBehaviors = this.behaviors;
-  },
-  registered: function() {
-    this._createPropertyObserver('prop', 'propChanged1');
-    this._createMethodObserver('propChanged2(prop)');
-    this.registeredCount++;
-    this.registeredProps = [this.prop1, this.prop2, this.prop3, this.prop4];
-    this.registeredBehaviors = this.behaviors;
-  },
-  prop1: true,
-  ready: function() {
-    this._ensureAttribute('attr', true);
-  },
-  beforePropChanged1: function() {
-    this.beforePropChangedCalled = true;
-  },
-  propChanged1: function() {
-    this.propChanged1Called = true;
-  },
-  propChanged2: function() {
-    this.propChanged2Called = true;
-  }
-};
-
-window.registerBehavior2 ={
-  prop2: true,
-  beforeRegister: function() {
-    this.beforeRegisterCount++;
-  },
-  registered: function() {
-    this.registeredCount++;
-  }
-};
-
-window.registerBehavior3 ={
-  prop3: true,
-  beforeRegister: function() {
-    this.beforeRegisterCount++;
-  },
-  registered: function() {
-    this.registeredCount++;
-  }
-};
-
-Polymer({
-  behaviors: [
-    window.registerBehavior1,
-    window.registerBehavior2,
-    window.registerBehavior3
-  ],
-  prop4: true,
-  beforeRegister: function() {
-    this.beforeRegisterCount++;
-  },
-  registered: function() {
-    this.registeredCount++;
-  },
-
-  beforeRegisterCount: 0,
-  registeredCount: 0,
-
-  is: 'behavior-registered'
-});
+    window.registerBehavior1 ={
+      beforeRegister: function() {
+        this._createPropertyObserver('beforeProp', 'beforePropChanged1');
+        this.beforeRegisterCount++;
+        this.beforeRegisterBehaviors = this.behaviors;
+      },
+      registered: function() {
+        this._createPropertyObserver('prop', 'propChanged1');
+        this._createMethodObserver('propChanged2(prop)');
+        this.registeredCount++;
+        this.registeredProps = [this.prop1, this.prop2, this.prop3, this.prop4];
+        this.registeredBehaviors = this.behaviors;
+      },
+      prop1: true,
+      ready: function() {
+        this._ensureAttribute('attr', true);
+      },
+      beforePropChanged1: function() {
+        this.beforePropChangedCalled = true;
+      },
+      propChanged1: function() {
+        this.propChanged1Called = true;
+      },
+      propChanged2: function() {
+        this.propChanged2Called = true;
+      }
+    };
+
+    window.registerBehavior2 ={
+      prop2: true,
+      beforeRegister: function() {
+        this.beforeRegisterCount++;
+      },
+      registered: function() {
+        this.registeredCount++;
+      }
+    };
+
+    window.registerBehavior3 ={
+      prop3: true,
+      beforeRegister: function() {
+        this.beforeRegisterCount++;
+      },
+      registered: function() {
+        this.registeredCount++;
+      }
+    };
 
-window.templateBehavior1 = {
-  _template: html`<div id="from-behavior1"></div>`
-};
-
-window.templateBehavior2 = {
-  _template: html`<div id="from-behavior2"></div>`
-};
-
-window.templateBehaviorFromRegistered = {
-  registered: function() {
-    this._template = html`<div id="behavior-from-registered"></div>`;
-  }
-};
-
-Polymer({
-  is: 'template-from-registered',
-  registered: function() {
-    this._template = html`<div id="from-registered"></div>`;
-  }
-});
+    Polymer({
+      behaviors: [
+        window.registerBehavior1,
+        window.registerBehavior2,
+        window.registerBehavior3
+      ],
+      prop4: true,
+      beforeRegister: function() {
+        this.beforeRegisterCount++;
+      },
+      registered: function() {
+        this.registeredCount++;
+      },
+
+      beforeRegisterCount: 0,
+      registeredCount: 0,
+
+      is: 'behavior-registered'
+    });
 
-Polymer({
-  is: 'template-from-base',
-  behaviors: [
-    window.templateBehavior1
-  ]
-});
+    window.templateBehavior1 = {
+      _template: html`<div id="from-behavior1"></div>`
+    };
 
-Polymer({
-  is: 'template-from-behavior',
-  behaviors: [
-    window.templateBehavior1
-  ]
-});
+    window.templateBehavior2 = {
+      _template: html`<div id="from-behavior2"></div>`
+    };
 
-Polymer({
-  is: 'template-from-behavior-overridden',
-  behaviors: [
-    window.templateBehavior1,
-    window.templateBehavior2
-  ]
-});
+    window.templateBehaviorFromRegistered = {
+      registered: function() {
+        this._template = html`<div id="behavior-from-registered"></div>`;
+      }
+    };
+
+    Polymer({
+      is: 'template-from-registered',
+      registered: function() {
+        this._template = html`<div id="from-registered"></div>`;
+      }
+    });
+
+    Polymer({
+      is: 'template-from-base',
+      behaviors: [
+        window.templateBehavior1
+      ]
+    });
+
+    Polymer({
+      is: 'template-from-behavior',
+      behaviors: [
+        window.templateBehavior1
+      ]
+    });
+
+    Polymer({
+      is: 'template-from-behavior-overridden',
+      behaviors: [
+        window.templateBehavior1,
+        window.templateBehavior2
+      ]
+    });
+
+    Polymer({
+      is: 'template-from-behavior-registered',
+      behaviors: [
+        window.templateBehaviorFromRegistered
+      ]
+    });
+
+    window.ModifyObserversBehavior = {
+
+      __barChangedCalled: 0,
+
+      beforeRegister: function() {
+        const observers = this.constructor.generatedFrom.observers;
+        this.constructor.generatedFrom.observers = observers.concat([
+          '_barChanged(bar)'
+        ]);
+      },
+
+      _barChanged: function() {
+        this.__barChangedCalled++;
+      }
+
+    };
+
+    Polymer({
+      is: 'modify-observers-via-behavior',
+      __zonkChangedCalled: 0,
+      observers: [
+        '_zonkChanged(zonk)'
+      ],
+      behaviors: [
+        window.ModifyObserversBehavior
+      ],
+      _zonkChanged: function() {
+        this.__zonkChangedCalled++;
+      }
+    });
 
-Polymer({
-  is: 'template-from-behavior-registered',
-  behaviors: [
-    window.templateBehaviorFromRegistered
-  ]
-});
 </script>
 
   <test-fixture id="single">
@@ -396,6 +428,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="modify-observers-via-behavior">
+    <template>
+      <modify-observers-via-behavior></modify-observers-via-behavior>
+    </template>
+  </test-fixture>
+
 <script type="module">
 import { Polymer } from '../../polymer-legacy.js';
 
@@ -479,6 +517,14 @@
     assert.equal(el.beforeRegisterBehaviors, el.behaviors);
   });
 
+  test('modify element observers', function() {
+    var el = fixture('modify-observers-via-behavior');
+    el.bar = 1;
+    assert.equal(el.__barChangedCalled, 1);
+    el.zonk = 1;
+    assert.equal(el.__zonkChangedCalled, 1);
+  });
+
 });
 
 
diff --git a/test/unit/mixin-behaviors.html b/test/unit/mixin-behaviors.html
index 8de238d2d0..cfb8d93e66 100644
--- a/test/unit/mixin-behaviors.html
+++ b/test/unit/mixin-behaviors.html
@@ -18,323 +18,377 @@
 <body>
 
   <script type="module">
-window.LifeCycleBehavior1 = {
-  _calledCreated: 0,
-  _calledAttached: 0,
-  _calledAttributeChanged: 0,
-
-  properties: {
-    foo: {
-      type: String
-    }
-  },
-
-  created() {
-    this._calledCreated++;
-  },
-
-  attached() {
-    this._calledAttached++;
-  },
-
-  attributeChanged() {
-    this._calledAttributeChanged++;
-  }
-};
-
-window.LifeCycleBehavior2 = {
-  created() {
-    this._calledCreated++;
-  },
-
-  attached() {
-    this._calledAttached++;
-  },
-
-};
-
-window.BehaviorA = {
-  properties: {
+    window.LifeCycleBehavior1 = {
 
-    label: {
-      type: String,
-      observer: '_labelChanged'
-    },
+      properties: {
+        foo: {
+          type: String
+        }
+      },
+
+      created() {
+            this.__createdList = this.__createdList || [];
+            this.__createdList.push('1');
+      },
+
+      attached() {
+            this.__attachedList = this.__attachedList || [];
+            this.__attachedList.push('1');
+      },
+
+      attributeChanged() {
+            this.__attributeChangedList = this.__attributeChangedList || [];
+            this.__attributeChangedList.push('1');
+      }
+    };
+
+    window.LifeCycleBehavior2 = {
+      created() {
+        this.__createdList = this.__createdList || [];
+        this.__createdList.push('2');
+      },
+
+      attached() {
+        this.__attachedList = this.__attachedList || [];
+        this.__attachedList.push('2');
+      }
+    };
+
+    window.LifeCycleBehavior3 = {
+      created() {
+        this.__createdList = this.__createdList || [];
+        this.__createdList.push('3');
+      }
+    };
+
+    window.LifeCycleBehavior4 = {
+      created() {
+        this.__createdList = this.__createdList || [];
+        this.__createdList.push('4');
+      }
+    };
+
+    window.BehaviorA = {
+      properties: {
+
+        label: {
+          type: String,
+          observer: '_labelChanged'
+        },
 
-    hasOptionsA: {
-      readOnly: true,
-      notify: true
-    },
+        hasOptionsA: {
+          readOnly: true,
+          notify: true
+        },
 
-    overridableProperty: {
-      value: false
-    },
+        overridableProperty: {
+          value: false
+        },
 
-    overridablePropertyB: {
-      value: false
-    },
+        overridablePropertyB: {
+          value: false
+        },
 
-    hasBehaviorA: {
-      value: true
-    },
+        hasBehaviorA: {
+          value: true
+        },
 
-    computeADependency: {
-      value: true
-    },
+        computeADependency: {
+          value: true
+        },
 
-    computeA: {
-      computed: '_computeProp(computeADependency)'
-    }
-  },
+        computeA: {
+          computed: '_computeProp(computeADependency)'
+        }
+      },
 
-  _simpleProperty: 'A',
+      _simpleProperty: 'A',
 
-  hostAttributes: {
-    behavior: 'A',
-    element: 'A',
-    user: 'A'
-  },
+      hostAttributes: {
+        behavior: 'A',
+        element: 'A',
+        user: 'A'
+      },
 
-  listeners: {
-    change: '_changeHandler'
-  },
+      listeners: {
+        change: '_changeHandler'
+      },
 
-  ready: function() {
-    this.__readyA = true;
-  },
+      ready: function() {
+        this.__readyA = true;
+      },
 
-  _labelChanged: function(label) {
-    this.__label = label;
-  },
+      _labelChanged: function(label) {
+        this.__label = label;
+      },
 
-  _changeHandler: function(e) {
-    this.__change = e.detail.value;
-  },
+      _changeHandler: function(e) {
+        this.__change = e.detail.value;
+      },
 
-  _computeProp: function(a) {
-    return a;
-  }
-};
+      _computeProp: function(a) {
+        return a;
+      }
+    };
 
-window.BehaviorB = {
-  properties: {
+    window.BehaviorB = {
+      properties: {
 
-    disabled: {
-      type: Boolean,
-      value: false,
-      observer: '_disabledChanged'
-    },
+        disabled: {
+          type: Boolean,
+          value: false,
+          observer: '_disabledChanged'
+        },
 
-    hasOptionsB: {
-      readOnly: true,
-      notify: true
-    },
+        hasOptionsB: {
+          readOnly: true,
+          notify: true
+        },
 
-    hasBehaviorB: {
-      value: true
-    },
+        hasBehaviorB: {
+          value: true
+        },
 
-    overridablePropertyB: {
-      value: true
-    },
+        overridablePropertyB: {
+          value: true
+        },
 
-    computeADependencyDependency: {
-      value: 'hi'
-    },
+        computeADependencyDependency: {
+          value: 'hi'
+        },
 
-    computeADependency: {
-      computed: '_computeProp(computeADependencyDependency)'
-    }
+        computeADependency: {
+          computed: '_computeProp(computeADependencyDependency)'
+        }
 
-  },
+      },
 
-  hostAttributes: {
-    behavior: 'B',
-    element: 'B',
-    user: 'B'
-  },
+      hostAttributes: {
+        behavior: 'B',
+        element: 'B',
+        user: 'B'
+      },
 
-  _simpleProperty: 'B',
+      _simpleProperty: 'B',
 
-  _disabledChanged: function(disabled) {
-    this.__disabled = disabled;
-  },
+      _disabledChanged: function(disabled) {
+        this.__disabled = disabled;
+      },
 
-  ready: function() {
-    this.__readyB = true;
-  },
+      ready: function() {
+        this.__readyB = true;
+      },
 
-};
+    };
 
-window.BehaviorC = {
+    window.BehaviorC = {
 
-  properties: {
+      properties: {
 
-    hasBehaviorC: {
-      value: true
-    }
+        hasBehaviorC: {
+          value: true
+        }
 
-  },
+      },
 
-  _simpleProperty: 'C'
-};
+      _simpleProperty: 'C'
+    };
 
-window.BehaviorD = {
+    window.BehaviorD = {
 
-  properties: {
+      properties: {
 
-    hasBehaviorD: {
-      value: true
-    }
+        hasBehaviorD: {
+          value: true
+        }
 
-  },
-  _simpleProperty: 'D'
+      },
+      _simpleProperty: 'D'
 
-};
-</script>
+    };
+  </script>
 
   <dom-module id="single-behavior">
     <script type="module">
-import { mixinBehaviors } from '../../lib/legacy/class.js';
-import { PolymerElement } from '../../polymer-element.js';
-customElements.define('single-behavior',
-  mixinBehaviors(window.BehaviorA, PolymerElement));
-</script>
+      import { mixinBehaviors } from '../../lib/legacy/class.js';
+      import { PolymerElement } from '../../polymer-element.js';
+      customElements.define('single-behavior',
+        mixinBehaviors(window.BehaviorA, PolymerElement));
+    </script>
   </dom-module>
 
   <dom-module id="lifecycle-behavior">
     <script type="module">
-import { mixinBehaviors } from '../../lib/legacy/class.js';
-import { PolymerElement } from '../../polymer-element.js';
-customElements.define('lifecycle-behavior',
-  mixinBehaviors([window.LifeCycleBehavior1,
-    window.LifeCycleBehavior2], PolymerElement));
-</script>
+      import { mixinBehaviors } from '../../lib/legacy/class.js';
+      import { PolymerElement } from '../../polymer-element.js';
+      customElements.define('lifecycle-behavior',
+        mixinBehaviors([window.LifeCycleBehavior1,
+          window.LifeCycleBehavior2], PolymerElement));
+    </script>
   </dom-module>
 
   <dom-module id="multi-behaviors">
     <script type="module">
-import { mixinBehaviors } from '../../lib/legacy/class.js';
-import { PolymerElement } from '../../polymer-element.js';
-customElements.define('multi-behaviors',
-  class extends mixinBehaviors(
-    [window.BehaviorA, window.BehaviorB], PolymerElement) {
-
-    static get properties() {
-      return {
-        foo: {
-          type: String,
-          reflectToAttribute: true,
-          readOnly: true,
-          observer: '_fooChanged'
-        },
-
-        overridableProperty: {
-          value: true
-        }
-      };
-    }
+      import { mixinBehaviors } from '../../lib/legacy/class.js';
+      import { PolymerElement } from '../../polymer-element.js';
+      customElements.define('multi-behaviors',
+        class extends mixinBehaviors(
+          [window.BehaviorA, window.BehaviorB], PolymerElement) {
+
+          static get properties() {
+            return {
+              foo: {
+                type: String,
+                reflectToAttribute: true,
+                readOnly: true,
+                observer: '_fooChanged'
+              },
+
+              overridableProperty: {
+                value: true
+              }
+            };
+          }
+
+          constructor() {
+            super();
+          }
+
+          _fooChanged(foo) {
+            this.__foo = foo;
+          }
+
+          _ensureAttributes() {
+            this._ensureAttribute('element', 'element');
+            super._ensureAttributes();
+          }
+      });
+    </script>
+  </dom-module>
 
-    constructor() {
-      super();
-    }
+  <script type="module">
+    import { mixinBehaviors } from '../../lib/legacy/class.js';
+    import { Polymer } from '../../polymer-legacy.js';
+    import { PolymerElement } from '../../polymer-element.js';
+
+    customElements.define('nested-behaviors',
+      class extends mixinBehaviors([window.BehaviorD, window.LifeCycleBehavior1], mixinBehaviors(
+        [
+          [window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA, window.LifeCycleBehavior2],
+            ], PolymerElement)) {
+        });
+
+    var base = Polymer({
+      is: 'sup-element',
+      behaviors: [
+        window.LifeCycleBehavior1,
+        window.LifeCycleBehavior2
+      ],
+      created: function() {
+        this.__createdList.push('sup');
+      }
+    });
 
-    _fooChanged(foo) {
-      this.__foo = foo;
-    }
+    class extended extends mixinBehaviors([window.LifeCycleBehavior3,
+        window.LifeCycleBehavior4], base) {
 
-    _ensureAttributes() {
-      this._ensureAttribute('element', 'element');
-      super._ensureAttributes();
+      created() {
+        super.created();
+        this.__createdList.push('sub');
+      }
     }
-});
-</script>
-  </dom-module>
 
-  <dom-module id="nested-behaviors">
-    <script type="module">
-import { mixinBehaviors } from '../../lib/legacy/class.js';
-import { PolymerElement } from '../../polymer-element.js';
-customElements.define('nested-behaviors',
-  class extends mixinBehaviors([window.BehaviorD, window.LifeCycleBehavior1], mixinBehaviors(
-      [
-        [window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA, window.LifeCycleBehavior2],
-      ], PolymerElement)) {
-  }
-);
-</script>
-  </dom-module>
+    customElements.define('extended-behaviors', extended);
+  </script>
 
   <dom-module id="behavior-registered">
     <template>
       <div id="content"></div>
     </template>
     <script type="module">
-import { mixinBehaviors } from '../../lib/legacy/class.js';
-import { PolymerElement } from '../../polymer-element.js';
+      import { mixinBehaviors } from '../../lib/legacy/class.js';
+      import { PolymerElement } from '../../polymer-element.js';
+
+      window.registerBehavior1 ={
+              registeredCount: 0,
+        registered: function() {
+          this._createPropertyObserver('prop', 'propChanged1');
+          this._createMethodObserver('propChanged2(prop)');
+          this.registeredCount++;
+          this.registeredProps = [this.prop1, this.prop2, this.prop3];
+          this.registeredBehaviors = this.behaviors;
+        },
+        prop1: true,
+        ready: function() {
+          this._ensureAttribute('attr', true);
+        },
+        propChanged1: function() {
+          this.propChanged1Called = true;
+        },
+        propChanged2: function() {
+          this.propChanged2Called = true;
+        }
+      };
 
-window.registerBehavior1 ={
-  registered: function() {
-    this._createPropertyObserver('prop', 'propChanged1');
-    this._createMethodObserver('propChanged2(prop)');
-    this.registeredCount++;
-    this.registeredProps = [this.prop1, this.prop2, this.prop3];
-    this.registeredBehaviors = this.behaviors;
-  },
-  prop1: true,
-  ready: function() {
-    this._ensureAttribute('attr', true);
-  },
-  propChanged1: function() {
-    this.propChanged1Called = true;
-  },
-  propChanged2: function() {
-    this.propChanged2Called = true;
-  }
-};
-
-window.registerBehavior2 ={
-  prop2: true,
-  registered: function() {
-    this.registeredCount++;
-  }
-};
-
-window.registerBehavior3 ={
-  prop3: true,
-  registered: function() {
-    this.registeredCount++;
-  }
-};
-
-class BehaviorRegistered extends mixinBehaviors([
-    window.registerBehavior1,
-    window.registerBehavior2,
-    window.registerBehavior3
-  ], PolymerElement) {
-
-  static get is() { return 'behavior-registered';}
-
-  _initializeProperties() {
-    super._initializeProperties();
-    this.registeredCount++;
-  }
-}
-
-BehaviorRegistered.prototype.registeredCount = 0;
-
-customElements.define(BehaviorRegistered.is, BehaviorRegistered);
-
-class BehaviorRegisteredExt extends BehaviorRegistered {
-  static get is() { return 'behavior-registered-ext';}
-}
-
-BehaviorRegisteredExt.prototype.registeredCount = 0;
-
-customElements.define(BehaviorRegisteredExt.is, BehaviorRegisteredExt);
-</script>
+      window.registerBehavior2 ={
+        prop2: true,
+        registered: function() {
+          this.registeredCount++;
+        }
+      };
+
+      window.registerBehavior3 ={
+        prop3: true,
+        registered: function() {
+          this.registeredCount++;
+        }
+      };
+
+      class BehaviorRegistered extends mixinBehaviors([
+          window.registerBehavior1,
+          window.registerBehavior2,
+          window.registerBehavior3
+        ], PolymerElement) {
+
+        static get is() { return 'behavior-registered';}
+
+        _initializeProperties() {
+          super._initializeProperties();
+          this.registeredCount++;
+        }
+      }
+
+      customElements.define(BehaviorRegistered.is, BehaviorRegistered);
+
+      class BehaviorRegisteredExt extends BehaviorRegistered {
+        static get is() { return 'behavior-registered-ext';}
+      }
+
+      customElements.define(BehaviorRegisteredExt.is, BehaviorRegisteredExt);
+    </script>
   </dom-module>
 
+  <script type="module">
+    import { mixinBehaviors } from '../../lib/legacy/class.js';
+    import { PolymerElement } from '../../polymer-element.js';
+
+    var klass = mixinBehaviors([
+      {
+        __fooChangedCalled: 0,
+        beforeRegister: function() {
+          this.constructor.generatedFrom.observers = [
+            '_fooChanged(foo)'
+          ];
+        },
+        _fooChanged: function() {
+          this.__fooChangedCalled++;
+        }
+      }
+    ], PolymerElement);
+
+    customElements.define('before-register-observers', klass);
+  </script>
+
   <test-fixture id="single">
     <template>
       <single-behavior></single-behavior>
@@ -359,12 +413,24 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="extended-behaviors">
+    <template>
+      <extended-behaviors></extended-behaviors>
+    </template>
+  </test-fixture>
+
   <test-fixture id="registered">
     <template>
       <behavior-registered></behavior-registered>
     </template>
   </test-fixture>
 
+  <test-fixture id="before-register-observers">
+    <template>
+      <before-register-observers></before-register-observers>
+    </template>
+  </test-fixture>
+
   <test-fixture id="registered-ext">
     <template>
       <behavior-registered-ext></behavior-registered-ext>
@@ -412,7 +478,7 @@
 
 });
 
-suite('behavior.registered', function() {
+suite('behavior.registered/beforeRegister', function() {
   test('can install dynamic properties', function() {
     var el = fixture('registered');
     assert.ok(el.$.content);
@@ -438,6 +504,12 @@
     assert.deepEqual(el.registeredProps, [true, true, true]);
   });
 
+  test('add observers via behavior in beforeRegister', function() {
+    var el = fixture('before-register-observers');
+    el.foo = 1;
+    assert.equal(el.__fooChangedCalled, 1);
+});
+
 });
 
 suite('behavior lifecycle', function() {
@@ -449,9 +521,9 @@
     });
 
     test('lifecycle', function() {
-      assert.equal(el._calledCreated, 2, 'created call count wrong');
-      assert.equal(el._calledAttached, 2, 'attached call count wrong');
-      assert.equal(el._calledAttributeChanged, 1,  'attributeChanged call count wrong');
+      assert.deepEqual(el.__createdList, ['1', '2'], 'created list wrong');
+      assert.deepEqual(el.__attachedList, ['1', '2'], 'attached list wrong');
+      assert.deepEqual(el.__attributeChangedList, ['1'],  'attributeChanged list wrong');
     });
 
   });
@@ -558,9 +630,9 @@
   });
 
   test('nested-behavior lifecycle', function() {
-    assert.equal(el._calledCreated, 2, 'created call count wrong');
-    assert.equal(el._calledAttached, 2, 'attached call count wrong');
-    assert.equal(el._calledAttributeChanged, 1,  'attributeChanged call count wrong');
+    assert.deepEqual(el.__createdList, ['2', '1'], 'created list wrong');
+    assert.deepEqual(el.__attachedList, ['2', '1'], 'attached list wrong');
+    assert.deepEqual(el.__attributeChangedList, ['1'],  'attributeChanged list wrong');
   });
 
   test('nested-behavior overrides ordering', function() {
@@ -572,6 +644,21 @@
   });
 
 });
+
+suite('extended-behaviors', function() {
+
+  var el;
+
+  setup(function() {
+    el = fixture('extended-behaviors');
+  });
+
+  test('lifecycle', function() {
+    assert.deepEqual(el.__createdList, ['1', '2', 'sup', '3', '4', 'sub'], 'created list wrong');
+  });
+
+});
+
 </script>
 
 </body>