happy-dom 17.0.3 → 17.1.0

package/src/browser/types/IOptionalBrowserSettings.ts

@@ -103,6 +103,7 @@ export default interface IOptionalBrowserSettings {
 	 */
 	device?: {
 		prefersColorScheme?: string;
+		prefersReducedMotion?: string;
 		mediaType?: string;
 	};
 

package/src/custom-element/CustomElementReactionStack.ts

@@ -1,7 +1,7 @@
-import HTMLElement from '../nodes/html-element/HTMLElement.js';
 import BrowserWindow from '../window/BrowserWindow.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import WindowBrowserContext from '../window/WindowBrowserContext.js';
+import Element from '../nodes/element/Element.js';
 
 /**
  * Custom element reaction stack.
@@ -29,7 +29,7 @@ export default class CustomElementReactionStack {
 	 * @param callbackName Callback name.
 	 * @param [args] Arguments.
 	 */
-	public enqueueReaction(element: HTMLElement, callbackName: string, args?: any[]): void {
+	public enqueueReaction(element: Element, callbackName: string, args?: any[]): void {
 		// If a polyfill is used, [PropertySymbol.registry] may be undefined
 		const definition = this.window.customElements[PropertySymbol.registry]?.get(element.localName);
 

package/src/match-media/MediaQueryItem.ts

@@ -199,6 +199,12 @@ export default class MediaQueryItem {
 	 * @returns "true" if the rule matches.
 	 */
 	private matchesRule(rule: IMediaQueryRule): boolean {
+		const settings = new WindowBrowserContext(this.window).getSettings();
+
+		if (!settings) {
+			return false;
+		}
+
 		if (!rule.value) {
 			switch (rule.name) {
 				case 'min-width':
@@ -218,6 +224,8 @@ export default class MediaQueryItem {
 				case 'max-aspect-ratio':
 				case 'aspect-ratio':
 					return true;
+				case 'prefers-reduced-motion':
+					return settings.device.prefersReducedMotion === 'reduce';
 			}
 			return false;
 		}
@@ -246,10 +254,9 @@ export default class MediaQueryItem {
 					? this.window.innerWidth > this.window.innerHeight
 					: this.window.innerWidth < this.window.innerHeight;
 			case 'prefers-color-scheme':
-				return (
-					rule.value ===
-					new WindowBrowserContext(this.window).getSettings().device.prefersColorScheme
-				);
+				return rule.value === settings.device.prefersColorScheme;
+			case 'prefers-reduced-motion':
+				return rule.value === settings.device.prefersReducedMotion;
 			case 'any-hover':
 			case 'hover':
 				if (rule.value === 'none') {

package/src/nodes/element/Element.ts

@@ -953,6 +953,25 @@ export default class Element
 		return null;
 	}
 
+	/**
+	 * Connected callback.
+	 */
+	public connectedCallback?(): void;
+
+	/**
+	 * Disconnected callback.
+	 */
+	public disconnectedCallback?(): void;
+
+	/**
+	 * Attribute changed callback.
+	 *
+	 * @param name Name.
+	 * @param oldValue Old value.
+	 * @param newValue New value.
+	 */
+	public attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
+
 	/**
 	 * Query CSS selector to find matching nodes.
 	 *
@@ -1449,6 +1468,17 @@ export default class Element
 		}
 
 		super[PropertySymbol.connectedToDocument]();
+
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'connectedCallback'
+		);
+
+		if (this[PropertySymbol.shadowRoot]) {
+			for (const childNode of this[PropertySymbol.nodeArray]) {
+				this.#onSlotChange(childNode);
+			}
+		}
 	}
 
 	/**
@@ -1461,6 +1491,11 @@ export default class Element
 		if (id) {
 			this.#removeIdentifierFromWindow(id);
 		}
+
+		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
+			this,
+			'disconnectedCallback'
+		);
 	}
 
 	/**
@@ -1563,7 +1598,7 @@ export default class Element
 	#onSlotChange(addedOrRemovedNode: Node): void {
 		const shadowRoot = this[PropertySymbol.shadowRoot];
 
-		if (!shadowRoot) {
+		if (!shadowRoot || !this[PropertySymbol.isConnected]) {
 			return;
 		}
 

package/src/nodes/html-element/HTMLElement.ts

@@ -498,25 +498,6 @@ export default class HTMLElement extends Element {
 		this.setAttribute('popover', value);
 	}
 
-	/**
-	 * Connected callback.
-	 */
-	public connectedCallback?(): void;
-
-	/**
-	 * Disconnected callback.
-	 */
-	public disconnectedCallback?(): void;
-
-	/**
-	 * Attribute changed callback.
-	 *
-	 * @param name Name.
-	 * @param oldValue Old value.
-	 * @param newValue New value.
-	 */
-	public attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
-
 	/**
 	 * Triggers a click event.
 	 */
@@ -612,30 +593,6 @@ export default class HTMLElement extends Element {
 		super[PropertySymbol.disconnectedFromNode]();
 	}
 
-	/**
-	 * @override
-	 */
-	public override [PropertySymbol.connectedToDocument](): void {
-		super[PropertySymbol.connectedToDocument]();
-
-		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
-			this,
-			'connectedCallback'
-		);
-	}
-
-	/**
-	 * @override
-	 */
-	public override [PropertySymbol.disconnectedFromDocument](): void {
-		super[PropertySymbol.disconnectedFromDocument]();
-
-		this[PropertySymbol.window][PropertySymbol.customElementReactionStack].enqueueReaction(
-			this,
-			'disconnectedCallback'
-		);
-	}
-
 	/**
 	 * @override
 	 */