fix(event-manager): shadow dom event bubbling

dist/amd/aurelia-binding.js

@@ -3397,7 +3397,10 @@ define(['exports', 'aurelia-logging', 'aurelia-pal', 'aurelia-task-queue', 'aure
         }
       }
 
-      target = target.parentNode;
+      var parent = target.parentNode;
+      var parentIsShadowRoot = parent && parent.toString() === '[object ShadowRoot]';
+
+      target = parentIsShadowRoot ? parent.host : parent;
     }
   }
 

dist/aurelia-binding.js

@@ -3302,7 +3302,10 @@ function handleDelegatedEvent(event) {
       }
     }
 
-    target = target.parentNode;
+    const parent = target.parentNode;
+    const parentIsShadowRoot = parent && parent.toString() === '[object ShadowRoot]';
+
+    target = parentIsShadowRoot ? parent.host : parent;
   }
 }
 

dist/commonjs/aurelia-binding.js

@@ -3350,7 +3350,10 @@ function handleDelegatedEvent(event) {
       }
     }
 
-    target = target.parentNode;
+    var parent = target.parentNode;
+    var parentIsShadowRoot = parent && parent.toString() === '[object ShadowRoot]';
+
+    target = parentIsShadowRoot ? parent.host : parent;
   }
 }
 

dist/es2015/aurelia-binding.js

@@ -3100,7 +3100,10 @@ function handleDelegatedEvent(event) {
       }
     }
 
-    target = target.parentNode;
+    const parent = target.parentNode;
+    const parentIsShadowRoot = parent && parent.toString() === '[object ShadowRoot]';
+
+    target = parentIsShadowRoot ? parent.host : parent;
   }
 }
 

dist/native-modules/aurelia-binding.js

@@ -3310,7 +3310,10 @@ function handleDelegatedEvent(event) {
       }
     }
 
-    target = target.parentNode;
+    var parent = target.parentNode;
+    var parentIsShadowRoot = parent && parent.toString() === '[object ShadowRoot]';
+
+    target = parentIsShadowRoot ? parent.host : parent;
   }
 }
 

dist/system/aurelia-binding.js

@@ -796,7 +796,10 @@ System.register(['aurelia-logging', 'aurelia-pal', 'aurelia-task-queue', 'aureli
         }
       }
 
-      target = target.parentNode;
+      var parent = target.parentNode;
+      var parentIsShadowRoot = parent && parent.toString() === '[object ShadowRoot]';
+
+      target = parentIsShadowRoot ? parent.host : parent;
     }
   }
 

src/event-manager.js

@@ -87,7 +87,10 @@ function handleDelegatedEvent(event) {
       }
     }
 
-    target = target.parentNode;
+    const parent = target.parentNode;
+    const parentIsShadowRoot = parent && parent instanceof ShadowRoot;
+
+    target = parentIsShadowRoot ? parent.host : parent;
   }
 }
 

test/event-manager.spec.js

@@ -72,20 +72,28 @@ describe('EventManager', () => {
   });
 
   describe('addEventListener', () => {
-    const em = new EventManager();
-    const one = document.createElement('div');
-    const two = document.createElement('div');
-    const three = document.createElement('div');
-
-    const oneClick = jasmine.createSpy('one-click');
-    const threeClick = jasmine.createSpy('three-click');
-    const oneDelegate = jasmine.createSpy('one-delegate');
-    const threeDelegate = jasmine.createSpy('three-delegate');
+    let em, one, two, three, shadowHost, shadowRoot, shadowButton, oneClick, threeClick, oneDelegate, threeDelegate;
 
     beforeEach(() => {
+      em = new EventManager();
+      one = document.createElement('div');
+      two = document.createElement('div');
+      three = document.createElement('div');
+      shadowHost = document.createElement('div');
+      shadowButton = document.createElement('button');  
+
+      oneClick = jasmine.createSpy('one-click');
+      threeClick = jasmine.createSpy('three-click');
+      oneDelegate = jasmine.createSpy('one-delegate');
+      threeDelegate = jasmine.createSpy('three-delegate');
+
       document.body.appendChild(one);
       one.appendChild(two);
       two.appendChild(three);
+      one.appendChild(shadowHost);
+
+      shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+      shadowRoot.appendChild(shadowButton);   
 
       em.addEventListener(one, 'click', oneClick, delegationStrategy.none);
       em.addEventListener(three, 'click', threeClick, delegationStrategy.none);
@@ -120,6 +128,20 @@ describe('EventManager', () => {
       threeClick.calls.reset();
     });
 
+    it('bubbles properly out of shadow dom when not delegated with composed flag', () => {
+      const shadowButtonClickEvent = DOM.createCustomEvent('click', { bubbles: true, composed: true });
+      shadowButton.dispatchEvent(shadowButtonClickEvent);
+      expect(oneClick).toHaveBeenCalledWith(shadowButtonClickEvent);
+      oneClick.calls.reset();
+    });
+
+    it('should not bubble out of shadow dom when not delegated without composed flag', () => {
+      const shadowButtonClickEvent = DOM.createCustomEvent('click', { bubbles: true });
+      shadowButton.dispatchEvent(shadowButtonClickEvent);
+      expect(oneClick).not.toHaveBeenCalledWith(shadowButtonClickEvent);
+      oneClick.calls.reset();
+    });
+
     it('bubbles properly when delegated', () => {
       const threeDelegateEvent = DOM.createCustomEvent('delegate', { bubbles: true });
       three.dispatchEvent(threeDelegateEvent);
@@ -143,6 +165,20 @@ describe('EventManager', () => {
       threeDelegate.calls.reset();
     });
 
+    it('bubbles properly out of shadow dom when delegated with composed flag', () => {
+      const shadowButtonDelegateEvent = DOM.createCustomEvent('delegate', { bubbles: true, composed: true });
+      shadowButton.dispatchEvent(shadowButtonDelegateEvent);
+      expect(oneDelegate).toHaveBeenCalledWith(shadowButtonDelegateEvent);
+      oneDelegate.calls.reset();
+    });
+
+    it('should not bubble out of shadow dom when delegated without composed flag', () => {
+      const shadowButtonDelegateEvent = DOM.createCustomEvent('delegate', { bubbles: true });
+      shadowButton.dispatchEvent(shadowButtonDelegateEvent);
+      expect(oneDelegate).not.toHaveBeenCalledWith(shadowButtonDelegateEvent);
+      oneDelegate.calls.reset();
+    });
+
     it('stops bubbling when asked', () => {
       let wasCalled = false;
       let stopDelegate = (event) => {