fix(mock-doc): ensure event bubbling follows shadow DOM boundaries (#6301)

Stout · stout-ni · web-flow · commit 1304ffcbfec3 · 2025-06-16T09:55:51.000-07:00
* fix(mock-doc): ensure event bubbling follows shadow DOM boundaries

* test(mock-doc): supply event bubbling test cases

---------

Co-authored-by: Stout Ni &lt;stout.officejob@gmail.com&gt;
diff --git a/src/mock-doc/event.ts b/src/mock-doc/event.ts
@@ -218,10 +218,30 @@ function triggerEventListener(elm: any, ev: MockEvent) {
   } else if (elm.parentElement == null && elm.tagName === 'HTML') {
     triggerEventListener(elm.ownerDocument, ev);
   } else {
-    triggerEventListener(elm.parentElement, ev);
+    const nextTarget = getNextEventTarget(elm, ev);
+    triggerEventListener(nextTarget, ev);
   }
 }
 
+function getNextEventTarget(elm: any, ev: MockEvent) {
+  // If current element has a parent, bubble to parent
+  if (elm.parentElement) {
+    return elm.parentElement;
+  }
+
+  // If current element is a Shadow Root (has host property), bubble to the host
+  if (elm.host && ev.composed) {
+    return elm.host;
+  }
+
+  // If we're at a Shadow Root boundary and event is composed, bubble to Shadow Host
+  if (ev.composed && elm.parentNode && elm.parentNode.host) {
+    return elm.parentNode.host;
+  }
+
+  return null;
+}
+
 export function dispatchEvent(currentTarget: any, ev: MockEvent) {
   ev.target = currentTarget;
   triggerEventListener(currentTarget, ev);
diff --git a/src/mock-doc/test/shadow-dom-event-bubbling.spec.ts b/src/mock-doc/test/shadow-dom-event-bubbling.spec.ts
@@ -0,0 +1,95 @@
+import { MockDocument } from '../document';
+import { MockWindow } from '../window';
+
+describe('Shadow DOM event bubbling', () => {
+  let win: MockWindow;
+  let doc: MockDocument;
+
+  beforeEach(() => {
+    win = new MockWindow();
+    doc = win.document as unknown as MockDocument;
+  });
+
+  it('should allow events to bubble from shadow DOM children to shadow host when composed: true', () => {
+    const parentHost = doc.createElement('my-parent');
+    const parentShadow = parentHost.attachShadow({ mode: 'open' });
+
+    const childHost = doc.createElement('my-child');
+    childHost.attachShadow({ mode: 'open' });
+
+    doc.body.appendChild(parentHost);
+    parentShadow.appendChild(childHost);
+
+    let parentEventReceived = false;
+    let receivedEventType = '';
+    let receivedComposed = false;
+
+    parentHost.addEventListener('custom-event', (event: any) => {
+      parentEventReceived = true;
+      receivedEventType = event.type;
+      receivedComposed = event.composed;
+    });
+
+    const customEvent = new Event('custom-event', {
+      bubbles: true,
+      composed: true,
+    });
+
+    childHost.dispatchEvent(customEvent);
+
+    expect(parentEventReceived).toBe(true);
+    expect(receivedEventType).toBe('custom-event');
+    expect(receivedComposed).toBe(true);
+  });
+
+  it('should NOT allow events to bubble across shadow boundaries when composed: false', () => {
+    const parentHost = doc.createElement('my-parent');
+    const parentShadow = parentHost.attachShadow({ mode: 'open' });
+
+    const childHost = doc.createElement('my-child');
+
+    doc.body.appendChild(parentHost);
+    parentShadow.appendChild(childHost);
+
+    let parentEventReceived = false;
+
+    parentHost.addEventListener('custom-event', () => {
+      parentEventReceived = true;
+    });
+
+    const customEvent = new Event('custom-event', {
+      bubbles: true,
+      composed: false, // This should NOT cross shadow boundaries
+    });
+
+    childHost.dispatchEvent(customEvent);
+
+    expect(parentEventReceived).toBe(false);
+  });
+
+  it('should work with CustomEvent and detail property', () => {
+    const parentHost = doc.createElement('my-parent');
+    const parentShadow = parentHost.attachShadow({ mode: 'open' });
+
+    const childHost = doc.createElement('my-child');
+
+    doc.body.appendChild(parentHost);
+    parentShadow.appendChild(childHost);
+
+    let receivedDetail: any = null;
+
+    parentHost.addEventListener('custom-event', (event: any) => {
+      receivedDetail = event.detail;
+    });
+
+    const customEvent = new CustomEvent('custom-event', {
+      bubbles: true,
+      composed: true,
+      detail: { message: 'test data', value: 42 },
+    });
+
+    childHost.dispatchEvent(customEvent);
+
+    expect(receivedDetail).toEqual({ message: 'test data', value: 42 });
+  });
+});
