@remote-dom/polyfill 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,175 @@
 # @remote-dom/polyfill
 
+## 1.3.0
+
+### Minor Changes
+
+- [#389](https://github.com/Shopify/remote-dom/pull/389) [`2479b21`](https://github.com/Shopify/remote-dom/commit/2479b21406f6149063bfc095dbb6c3a019386403) Thanks [@lemonmade](https://github.com/lemonmade)! - Added native support for synchronizing attributes and event listeners
+
+  Previously, Remote DOM only offered “remote properties” as a way to synchronize element state between the host and remote environments. These remote properties effectively synchronize a subset of a custom element’s instance properties. The `RemoteElement` class offers [a declarative way to define the properties that should be synchronized](/packages/core/README.md#remote-properties).
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteProperties() {
+      return ['label'];
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+  myElement.label = 'Hello, World!';
+  ```
+
+  The same `remoteProperties` configuration can create special handling for attributes and event listeners. By default, a remote property is automatically updated when setting an [attribute](https://developer.mozilla.org/en-US/docs/Glossary/Attribute) of the same name:
+
+  ```ts
+  const myElement = document.createElement('my-element');
+  myElement.setAttribute('label', 'Hello, World!');
+
+  // myElement.label === 'Hello, World!', and this value is synchronized
+  // with the host environment as a “remote property”
+  ```
+
+  Similarly, a remote property can be automatically updated when adding an event listener based on a conventional `on` property naming prefix:
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteProperties() {
+      return {
+        onChange: {
+          event: true,
+        },
+      };
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+
+  // This adds a callback property that is synchronized with the host environment
+  myElement.onChange = () => console.log('Changed!');
+
+  // And so does this, but using the `addEventListener` method instead
+  myElement.addEventListener('change', () => console.log('Changed!'));
+  ```
+
+  These utilities are handy, but they don’t align with patterns in native DOM elements, particularly when it comes to events. Now, both of these can be represented in a fashion that is more conventional in HTML. The `remoteAttributes` configuration allows you to define a set of element attributes that will be synchronized directly the host environment, instead of being treated as instance properties:
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteAttributes() {
+      return ['label'];
+    }
+
+    // If you want to add instance properties, you can do it with getters and
+    // setters that manipulate the attribute value:
+    //
+    // get label() {
+    //   return this.getAttribute('label');
+    // }
+    //
+    // set label(value) {
+    //   this.setAttribute('label', value);
+    // }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+  myElement.setAttribute('label', 'Hello, World!');
+  ```
+
+  Similarly, the `remoteEvents` configuration allows you to define a set of event listeners that will be synchronized directly with the host environment:
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteEvents() {
+      return ['change'];
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+
+  // And so does this, but using the `addEventListener` method instead
+  myElement.addEventListener('change', () => console.log('Changed!'));
+
+  // No `myElement.onChange` property is created
+  ```
+
+  The `remoteProperties` configuration will continue to be supported for cases where you want to synchronize instance properties. Because instance properties can be any JavaScript type, properties are the highest-fidelity field that can be synchronized between the remote and host environments. However, adding event listeners using the `remoteProperties.event` configuration is **deprecated and will be removed in the next major version**. You should use the `remoteEvents` configuration instead. If you were previously defining remote properties which only accepted strings, consider using the `remoteAttributes` configuration, which stores the value entirely in an HTML attribute instead.
+
+  This change is being released in a backwards-compatible way, so you can continue to use the existing `remoteProperties` configuration on host and/or remote environments without any code changes.
+
+  All host utilities have been updated to support the new `attributes` and `eventListeners` property that are synchronized with the remote environment. This includes updates to the [React](/packages/react/README.md#event-listener-props) and [Preact hosts to map events to conventional callback props](/packages/preact/README.md#event-listener-props), and updates to the [`DOMRemoteReceiver` class](/packages/core/README.md#domremotereceiver), which now applies fields to the host element exactly as they were applied in the remote environment:
+
+  ```ts
+  // Remote environment:
+
+  class MyElement extends RemoteElement {
+    static get remoteEvents() {
+      return ['change'];
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+
+  myElement.addEventListener('change', (event) => {
+    console.log('Changed! New value: ', event.detail);
+  });
+
+  // Host environment:
+
+  class MyElement extends HTMLElement {
+    connectedCallback() {
+      // Emit a change event on this element, with detail that will be passed
+      // to the remote environment
+      this.addEventListener('change', (event) => {
+        event.stopImmediatePropagation();
+
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            detail: this.value,
+          }),
+        );
+      });
+    }
+
+    // Additional implementation details of the host custom element...
+  }
+
+  customElements.define('my-element', MyElement);
+  ```
+
+### Patch Changes
+
+- [#389](https://github.com/Shopify/remote-dom/pull/389) [`2479b21`](https://github.com/Shopify/remote-dom/commit/2479b21406f6149063bfc095dbb6c3a019386403) Thanks [@lemonmade](https://github.com/lemonmade)! - Bug fixes to event dispatching
+
+  - Listeners on the target are now called during both the capture and bubble phases.
+  - `stopPropagation` now respected.
+  - `stopImmediatePropagation` now also stops regular propagation.
+
+- [#389](https://github.com/Shopify/remote-dom/pull/389) [`2479b21`](https://github.com/Shopify/remote-dom/commit/2479b21406f6149063bfc095dbb6c3a019386403) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix `Event.bubbles` and `Event.composedPath()` implementations
+
+## 1.2.1
+
+### Patch Changes
+
+- [#419](https://github.com/Shopify/remote-dom/pull/419) [`3c6bd29`](https://github.com/Shopify/remote-dom/commit/3c6bd291121b9fa02cac4ba57274601e97b2a2d2) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix synchronization of `slot` property in some edge cases
+
 ## 1.2.0
 
 ### Minor Changes

package/build/cjs/Element.cjs

@@ -11,7 +11,6 @@ const serialization = require('./serialization.cjs');
 class Element extends ParentNode.ParentNode {
   nodeType = constants.NodeType.ELEMENT_NODE;
   [constants.NS] = constants.NamespaceURI.XHTML;
-  [constants.SLOT] = '';
   get namespaceURI() {
     return this[constants.NS];
   }
@@ -19,11 +18,10 @@ class Element extends ParentNode.ParentNode {
     return this.nodeName;
   }
   get slot() {
-    return this[constants.SLOT];
+    return this.getAttribute('slot') ?? '';
   }
   set slot(slot) {
     const finalSlot = String(slot);
-    this[constants.SLOT] = finalSlot;
     if (this.getAttribute('slot') !== finalSlot) {
       this.attributes.setNamedItem(new Attr.Attr('slot', finalSlot));
     }
@@ -36,6 +34,9 @@ class Element extends ParentNode.ParentNode {
     }
     return attributes;
   }
+  getAttributeNames() {
+    return [...this.attributes].map(attr => attr.name);
+  }
   get firstElementChild() {
     return this.children[0] ?? null;
   }

package/build/cjs/Event.cjs

@@ -33,11 +33,11 @@ class Event {
   composed = false;
   defaultPrevented = false;
   cancelBubble = false;
-  immediatePropagationStopped = false;
   eventPhase = 0;
-  path = [];
   // private inPassiveListener = false;
 
+  [constants.PATH] = [];
+  [constants.STOP_IMMEDIATE_PROPAGATION] = false;
   constructor(type, options) {
     this.type = type;
     Object.defineProperty(this, constants.IS_TRUSTED, {
@@ -50,17 +50,18 @@ class Event {
       if (options.composed) this.composed = options.composed;
     }
   }
-  get composedPath() {
-    return this.path;
-  }
   get isTrusted() {
     return this[constants.IS_TRUSTED];
   }
+  composedPath() {
+    return this[constants.PATH];
+  }
   stopPropagation() {
     this.cancelBubble = true;
   }
   stopImmediatePropagation() {
-    this.immediatePropagationStopped = true;
+    this[constants.STOP_IMMEDIATE_PROPAGATION] = true;
+    this.cancelBubble = true;
   }
   preventDefault() {
     this.defaultPrevented = true;
@@ -79,31 +80,24 @@ class Event {
     this.cancelable = Boolean(cancelable);
   }
 }
-function fireEvent(event, target, phase) {
-  const listeners = target[constants.LISTENERS];
+function fireEvent(event, currentTarget, phase) {
+  const listeners = currentTarget[constants.LISTENERS];
   const list = listeners?.get(`${event.type}${phase === EventPhase.CAPTURING_PHASE ? CAPTURE_MARKER : ''}`);
-  if (!list) return false;
-  let defaultPrevented = false;
+  if (!list) return;
   for (const listener of list) {
-    event.eventPhase = phase;
-    event.currentTarget = target;
+    event.eventPhase = event.target === currentTarget ? EventPhase.AT_TARGET : phase;
+    event.currentTarget = currentTarget;
     try {
       if (typeof listener === 'object') {
         listener.handleEvent(event);
       } else {
-        listener.call(target, event);
+        listener.call(currentTarget, event);
       }
     } catch (err) {
       setTimeout(thrower, 0, err);
     }
-    if (event.defaultPrevented === true) {
-      defaultPrevented = true;
-    }
-    if (event.immediatePropagationStopped) {
-      break;
-    }
+    if (event[constants.STOP_IMMEDIATE_PROPAGATION]) break;
   }
-  return defaultPrevented;
 }
 function thrower(error) {
   throw error;

package/build/cjs/EventTarget.cjs

@@ -71,22 +71,17 @@ class EventTarget {
     // }
     event.target = this;
     event.srcElement = this;
-    event.path = path;
-    let defaultPrevented = false;
-    for (let i = path.length; --i;) {
-      if (Event.fireEvent(event, path[i], Event.EventPhase.CAPTURING_PHASE)) {
-        defaultPrevented = true;
-      }
-    }
-    if (Event.fireEvent(event, this, Event.EventPhase.AT_TARGET)) {
-      defaultPrevented = true;
+    event[constants.PATH] = path;
+    for (let i = path.length; i--;) {
+      Event.fireEvent(event, path[i], Event.EventPhase.CAPTURING_PHASE);
+      if (event.cancelBubble) return event.defaultPrevented;
     }
-    for (let i = 1; i < path.length; i++) {
-      if (Event.fireEvent(event, path[i], Event.EventPhase.BUBBLING_PHASE)) {
-        defaultPrevented = true;
-      }
+    const bubblePath = event.bubbles ? path : path.slice(0, 1);
+    for (let i = 0; i < bubblePath.length; i++) {
+      Event.fireEvent(event, bubblePath[i], Event.EventPhase.BUBBLING_PHASE);
+      if (event.cancelBubble) return event.defaultPrevented;
     }
-    return !defaultPrevented;
+    return event.defaultPrevented;
   }
 }
 function removeEventListener(type, listener, options) {

package/build/cjs/NamedNodeMap.cjs

@@ -111,7 +111,7 @@ function updateElementAttribute(element, name, oldValue, newValue) {
   const {
     attributeChangedCallback
   } = element;
-  if (name === 'slot' && element.slot !== newValue) {
+  if (name === 'slot') {
     element.slot = newValue ?? '';
   }
   if (attributeChangedCallback == null || observedAttributes == null || !observedAttributes.includes(name)) {

package/build/cjs/ParentNode.cjs

@@ -49,6 +49,7 @@ class ParentNode extends ChildNode.ChildNode {
       const children = this.children;
       children.splice(children.indexOf(child), 1);
     }
+    child.disconnectedCallback?.();
     this[constants.HOOKS].removeChild?.(this, child, childNodesIndex);
   }
   replaceChild(newChild, oldChild) {
@@ -124,6 +125,7 @@ class ParentNode extends ChildNode.ChildNode {
       childNodes.push(child);
       if (isElement) this.children.push(child);
     }
+    child.connectedCallback?.();
     this[constants.HOOKS].insertChild?.(this, child, insertIndex);
   }
 }

package/build/cjs/constants.cjs

@@ -15,8 +15,9 @@ const PARENT = Symbol('parent');
 const DATA = Symbol('data');
 const LISTENERS = Symbol('listeners');
 const IS_TRUSTED = Symbol('isTrusted');
+const PATH = Symbol('path');
+const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
 const CONTENT = Symbol('content');
-const SLOT = Symbol('slot');
 const HOOKS = Symbol('hooks');
 
 // @TODO remove explicit values
@@ -56,6 +57,7 @@ exports.NodeType = NodeType;
 exports.OWNER_DOCUMENT = OWNER_DOCUMENT;
 exports.OWNER_ELEMENT = OWNER_ELEMENT;
 exports.PARENT = PARENT;
+exports.PATH = PATH;
 exports.PREV = PREV;
-exports.SLOT = SLOT;
+exports.STOP_IMMEDIATE_PROPAGATION = STOP_IMMEDIATE_PROPAGATION;
 exports.VALUE = VALUE;

package/build/esm/Element.mjs

@@ -1,4 +1,4 @@
-import { NodeType, NS, NamespaceURI, SLOT, ATTRIBUTES } from './constants.mjs';
+import { NodeType, NS, NamespaceURI, ATTRIBUTES } from './constants.mjs';
 import { ParentNode } from './ParentNode.mjs';
 import { NamedNodeMap } from './NamedNodeMap.mjs';
 import { Attr } from './Attr.mjs';
@@ -7,7 +7,6 @@ import { serializeNode, serializeChildren, parseHtml } from './serialization.mjs
 class Element extends ParentNode {
   nodeType = NodeType.ELEMENT_NODE;
   [NS] = NamespaceURI.XHTML;
-  [SLOT] = '';
   get namespaceURI() {
     return this[NS];
   }
@@ -15,11 +14,10 @@ class Element extends ParentNode {
     return this.nodeName;
   }
   get slot() {
-    return this[SLOT];
+    return this.getAttribute('slot') ?? '';
   }
   set slot(slot) {
     const finalSlot = String(slot);
-    this[SLOT] = finalSlot;
     if (this.getAttribute('slot') !== finalSlot) {
       this.attributes.setNamedItem(new Attr('slot', finalSlot));
     }
@@ -32,6 +30,9 @@ class Element extends ParentNode {
     }
     return attributes;
   }
+  getAttributeNames() {
+    return [...this.attributes].map(attr => attr.name);
+  }
   get firstElementChild() {
     return this.children[0] ?? null;
   }

package/build/esm/Event.mjs

@@ -1,4 +1,4 @@
-import { IS_TRUSTED, LISTENERS } from './constants.mjs';
+import { PATH, STOP_IMMEDIATE_PROPAGATION, IS_TRUSTED, LISTENERS } from './constants.mjs';
 
 let EventPhase = /*#__PURE__*/function (EventPhase) {
   EventPhase[EventPhase["NONE"] = 0] = "NONE";
@@ -29,11 +29,11 @@ class Event {
   composed = false;
   defaultPrevented = false;
   cancelBubble = false;
-  immediatePropagationStopped = false;
   eventPhase = 0;
-  path = [];
   // private inPassiveListener = false;
 
+  [PATH] = [];
+  [STOP_IMMEDIATE_PROPAGATION] = false;
   constructor(type, options) {
     this.type = type;
     Object.defineProperty(this, IS_TRUSTED, {
@@ -46,17 +46,18 @@ class Event {
       if (options.composed) this.composed = options.composed;
     }
   }
-  get composedPath() {
-    return this.path;
-  }
   get isTrusted() {
     return this[IS_TRUSTED];
   }
+  composedPath() {
+    return this[PATH];
+  }
   stopPropagation() {
     this.cancelBubble = true;
   }
   stopImmediatePropagation() {
-    this.immediatePropagationStopped = true;
+    this[STOP_IMMEDIATE_PROPAGATION] = true;
+    this.cancelBubble = true;
   }
   preventDefault() {
     this.defaultPrevented = true;
@@ -75,31 +76,24 @@ class Event {
     this.cancelable = Boolean(cancelable);
   }
 }
-function fireEvent(event, target, phase) {
-  const listeners = target[LISTENERS];
+function fireEvent(event, currentTarget, phase) {
+  const listeners = currentTarget[LISTENERS];
   const list = listeners?.get(`${event.type}${phase === EventPhase.CAPTURING_PHASE ? CAPTURE_MARKER : ''}`);
-  if (!list) return false;
-  let defaultPrevented = false;
+  if (!list) return;
   for (const listener of list) {
-    event.eventPhase = phase;
-    event.currentTarget = target;
+    event.eventPhase = event.target === currentTarget ? EventPhase.AT_TARGET : phase;
+    event.currentTarget = currentTarget;
     try {
       if (typeof listener === 'object') {
         listener.handleEvent(event);
       } else {
-        listener.call(target, event);
+        listener.call(currentTarget, event);
       }
     } catch (err) {
       setTimeout(thrower, 0, err);
     }
-    if (event.defaultPrevented === true) {
-      defaultPrevented = true;
-    }
-    if (event.immediatePropagationStopped) {
-      break;
-    }
+    if (event[STOP_IMMEDIATE_PROPAGATION]) break;
   }
-  return defaultPrevented;
 }
 function thrower(error) {
   throw error;

package/build/esm/EventTarget.mjs

@@ -1,4 +1,4 @@
-import { LISTENERS, OWNER_DOCUMENT, HOOKS } from './constants.mjs';
+import { LISTENERS, OWNER_DOCUMENT, HOOKS, PATH } from './constants.mjs';
 import { fireEvent, CAPTURE_MARKER, EventPhase } from './Event.mjs';
 
 const ONCE_LISTENERS = Symbol('onceListeners');
@@ -67,22 +67,17 @@ class EventTarget {
     // }
     event.target = this;
     event.srcElement = this;
-    event.path = path;
-    let defaultPrevented = false;
-    for (let i = path.length; --i;) {
-      if (fireEvent(event, path[i], EventPhase.CAPTURING_PHASE)) {
-        defaultPrevented = true;
-      }
-    }
-    if (fireEvent(event, this, EventPhase.AT_TARGET)) {
-      defaultPrevented = true;
+    event[PATH] = path;
+    for (let i = path.length; i--;) {
+      fireEvent(event, path[i], EventPhase.CAPTURING_PHASE);
+      if (event.cancelBubble) return event.defaultPrevented;
     }
-    for (let i = 1; i < path.length; i++) {
-      if (fireEvent(event, path[i], EventPhase.BUBBLING_PHASE)) {
-        defaultPrevented = true;
-      }
+    const bubblePath = event.bubbles ? path : path.slice(0, 1);
+    for (let i = 0; i < bubblePath.length; i++) {
+      fireEvent(event, bubblePath[i], EventPhase.BUBBLING_PHASE);
+      if (event.cancelBubble) return event.defaultPrevented;
     }
-    return !defaultPrevented;
+    return event.defaultPrevented;
   }
 }
 function removeEventListener(type, listener, options) {

package/build/esm/NamedNodeMap.mjs

@@ -107,7 +107,7 @@ function updateElementAttribute(element, name, oldValue, newValue) {
   const {
     attributeChangedCallback
   } = element;
-  if (name === 'slot' && element.slot !== newValue) {
+  if (name === 'slot') {
     element.slot = newValue ?? '';
   }
   if (attributeChangedCallback == null || observedAttributes == null || !observedAttributes.includes(name)) {

package/build/esm/ParentNode.mjs

@@ -45,6 +45,7 @@ class ParentNode extends ChildNode {
       const children = this.children;
       children.splice(children.indexOf(child), 1);
     }
+    child.disconnectedCallback?.();
     this[HOOKS].removeChild?.(this, child, childNodesIndex);
   }
   replaceChild(newChild, oldChild) {
@@ -120,6 +121,7 @@ class ParentNode extends ChildNode {
       childNodes.push(child);
       if (isElement) this.children.push(child);
     }
+    child.connectedCallback?.();
     this[HOOKS].insertChild?.(this, child, insertIndex);
   }
 }

package/build/esm/constants.mjs

@@ -11,8 +11,9 @@ const PARENT = Symbol('parent');
 const DATA = Symbol('data');
 const LISTENERS = Symbol('listeners');
 const IS_TRUSTED = Symbol('isTrusted');
+const PATH = Symbol('path');
+const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
 const CONTENT = Symbol('content');
-const SLOT = Symbol('slot');
 const HOOKS = Symbol('hooks');
 
 // @TODO remove explicit values
@@ -37,4 +38,4 @@ let NamespaceURI = /*#__PURE__*/function (NamespaceURI) {
   return NamespaceURI;
 }({});
 
-export { ATTRIBUTES, CHILD, CONTENT, DATA, HOOKS, IS_TRUSTED, LISTENERS, NAME, NEXT, NS, NamespaceURI, NodeType, OWNER_DOCUMENT, OWNER_ELEMENT, PARENT, PREV, SLOT, VALUE };
+export { ATTRIBUTES, CHILD, CONTENT, DATA, HOOKS, IS_TRUSTED, LISTENERS, NAME, NEXT, NS, NamespaceURI, NodeType, OWNER_DOCUMENT, OWNER_ELEMENT, PARENT, PATH, PREV, STOP_IMMEDIATE_PROPAGATION, VALUE };

package/build/esnext/Element.esnext

@@ -1,4 +1,4 @@
-import { NodeType, NS, NamespaceURI, SLOT, ATTRIBUTES } from './constants.esnext';
+import { NodeType, NS, NamespaceURI, ATTRIBUTES } from './constants.esnext';
 import { ParentNode } from './ParentNode.esnext';
 import { NamedNodeMap } from './NamedNodeMap.esnext';
 import { Attr } from './Attr.esnext';
@@ -8,7 +8,6 @@ class Element extends ParentNode {
   static observedAttributes;
   nodeType = NodeType.ELEMENT_NODE;
   [NS] = NamespaceURI.XHTML;
-  [SLOT] = "";
   get namespaceURI() {
     return this[NS];
   }
@@ -17,11 +16,10 @@ class Element extends ParentNode {
   }
   [ATTRIBUTES];
   get slot() {
-    return this[SLOT];
+    return this.getAttribute("slot") ?? "";
   }
   set slot(slot) {
     const finalSlot = String(slot);
-    this[SLOT] = finalSlot;
     if (this.getAttribute("slot") !== finalSlot) {
       this.attributes.setNamedItem(new Attr("slot", finalSlot));
     }
@@ -34,6 +32,9 @@ class Element extends ParentNode {
     }
     return attributes;
   }
+  getAttributeNames() {
+    return [...this.attributes].map((attr) => attr.name);
+  }
   get firstElementChild() {
     return this.children[0] ?? null;
   }

package/build/esnext/Event.esnext

@@ -1,4 +1,4 @@
-import { IS_TRUSTED, LISTENERS } from './constants.esnext';
+import { IS_TRUSTED, PATH, STOP_IMMEDIATE_PROPAGATION, LISTENERS } from './constants.esnext';
 
 var EventPhase = /* @__PURE__ */ ((EventPhase2) => {
   EventPhase2[EventPhase2["NONE"] = 0] = "NONE";
@@ -36,23 +36,24 @@ class Event {
   composed = false;
   defaultPrevented = false;
   cancelBubble = false;
-  immediatePropagationStopped = false;
   eventPhase = 0;
-  path = [];
   // private inPassiveListener = false;
   data;
+  [PATH] = [];
   [IS_TRUSTED];
-  get composedPath() {
-    return this.path;
-  }
+  [STOP_IMMEDIATE_PROPAGATION] = false;
   get isTrusted() {
     return this[IS_TRUSTED];
   }
+  composedPath() {
+    return this[PATH];
+  }
   stopPropagation() {
     this.cancelBubble = true;
   }
   stopImmediatePropagation() {
-    this.immediatePropagationStopped = true;
+    this[STOP_IMMEDIATE_PROPAGATION] = true;
+    this.cancelBubble = true;
   }
   preventDefault() {
     this.defaultPrevented = true;
@@ -70,33 +71,26 @@ class Event {
     this.cancelable = Boolean(cancelable);
   }
 }
-function fireEvent(event, target, phase) {
-  const listeners = target[LISTENERS];
+function fireEvent(event, currentTarget, phase) {
+  const listeners = currentTarget[LISTENERS];
   const list = listeners?.get(
     `${event.type}${phase === 1 /* CAPTURING_PHASE */ ? CAPTURE_MARKER : ""}`
   );
-  if (!list) return false;
-  let defaultPrevented = false;
+  if (!list) return;
   for (const listener of list) {
-    event.eventPhase = phase;
-    event.currentTarget = target;
+    event.eventPhase = event.target === currentTarget ? 2 /* AT_TARGET */ : phase;
+    event.currentTarget = currentTarget;
     try {
       if (typeof listener === "object") {
         listener.handleEvent(event);
       } else {
-        listener.call(target, event);
+        listener.call(currentTarget, event);
       }
     } catch (err) {
       setTimeout(thrower, 0, err);
     }
-    if (event.defaultPrevented === true) {
-      defaultPrevented = true;
-    }
-    if (event.immediatePropagationStopped) {
-      break;
-    }
+    if (event[STOP_IMMEDIATE_PROPAGATION]) break;
   }
-  return defaultPrevented;
 }
 function thrower(error) {
   throw error;