From 35e3c54b9b4944f025265a61257ee667541ab3d4 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 11 Dec 2017 17:43:49 -0800
Subject: [PATCH 1/2] Apply `listeners` in constructor rather than `ready`

Fixes #4394. This change allows elements to have "first crack" at their own events (via the `listeners` object) before handlers registered via `on-*` see events. This is both more expected and fixes an inconsistency with 1.x.
---
 lib/legacy/legacy-element-mixin.html |  6 +++++-
 lib/utils/gestures.html              |  8 +++++++-
 test/unit/events-elements.html       | 14 ++++++++++++++
 test/unit/events.html                | 17 +++++++++++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/lib/legacy/legacy-element-mixin.html b/lib/legacy/legacy-element-mixin.html
index 1a671a7274..3ce281c363 100644
--- a/lib/legacy/legacy-element-mixin.html
+++ b/lib/legacy/legacy-element-mixin.html
@@ -81,6 +81,11 @@
         /** @type {Object<string, Function>} */
         this._debouncers;
         this.created();
+        // Ensure listeners are applied immediately so that they are
+        // added before declarative event listeners. This allows an element to
+        // decorate itself via an event prior to any declarative listeners
+        // seeing the event. Note, this ensures compatibility with 1.x ordering.
+        this._applyListeners();
       }
 
       /**
@@ -180,7 +185,6 @@
        */
       ready() {
         this._ensureAttributes();
-        this._applyListeners();
         super.ready();
       }
 
diff --git a/lib/utils/gestures.html b/lib/utils/gestures.html
index 8bdff53952..e40bc262c1 100644
--- a/lib/utils/gestures.html
+++ b/lib/utils/gestures.html
@@ -579,7 +579,13 @@
      */
     setTouchAction: function(node, value) {
       if (HAS_NATIVE_TA) {
-        node.style.touchAction = value;
+        // NOTE: add touchAction async so that events can be added in
+        // custom element constructors. Otherwise we run afoult of custom
+        // elements restriction against settings attributes (style) in the
+        // constructor.
+        Polymer.Async.microTask.run(() => {
+          node.style.touchAction = value;
+        });
       }
       node[TOUCH_ACTION] = value;
     },
diff --git a/test/unit/events-elements.html b/test/unit/events-elements.html
index c5209f35e2..6df0e550c1 100644
--- a/test/unit/events-elements.html
+++ b/test/unit/events-elements.html
@@ -17,6 +17,8 @@
       this._removed = [];
     },
     handle: function(e) {
+      const order = e._handleOrder = e._handleOrder || [];
+      order.push(this.localName);
       this._handled[e.currentTarget.localName] = e.type;
     },
     unlisten: function(node, eventName, handler) {
@@ -51,6 +53,18 @@
   </script>
 </dom-module>
 
+<dom-module id="x-order">
+    <template>
+      <x-listeners id="inner" on-foo="handle"></x-listeners>
+    </template>
+    <script>
+      Polymer({
+        is: 'x-order',
+        behaviors: [EventLoggerImpl]
+      });
+    </script>
+  </dom-module>
+
 <dom-module id="x-dynamic">
   <template>
     <div id="inner"></div>
diff --git a/test/unit/events.html b/test/unit/events.html
index c6d9c81cfb..7b896ca9c3 100644
--- a/test/unit/events.html
+++ b/test/unit/events.html
@@ -78,6 +78,23 @@
 
       });
 
+      suite('listeners + on-*', function() {
+        suiteSetup(function() {
+          el = document.createElement('x-order');
+          document.body.appendChild(el);
+        });
+
+        suiteTeardown(function() {
+          document.body.removeChild(el);
+        });
+
+        test('listeners handled before on-* events', function() {
+          const e = el.$.inner.fire('foo', {});
+          assert.deepEqual(e._handleOrder, ['x-listeners', 'x-order']);
+        });
+
+      });
+
       suite('dynamic', function() {
 
         var options;

From ade5e7969f47caf93d61234b6e40ff16f9d933d5 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Tue, 12 Dec 2017 14:30:15 -0800
Subject: [PATCH 2/2] Fix typo in comment

---
 lib/utils/gestures.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/utils/gestures.html b/lib/utils/gestures.html
index e40bc262c1..dacc404a63 100644
--- a/lib/utils/gestures.html
+++ b/lib/utils/gestures.html
@@ -580,7 +580,7 @@
     setTouchAction: function(node, value) {
       if (HAS_NATIVE_TA) {
         // NOTE: add touchAction async so that events can be added in
-        // custom element constructors. Otherwise we run afoult of custom
+        // custom element constructors. Otherwise we run afoul of custom
         // elements restriction against settings attributes (style) in the
         // constructor.
         Polymer.Async.microTask.run(() => {