happy-dom 14.12.3 → 15.0.0

package/src/nodes/html-canvas-element/HTMLCanvasElement.ts

@@ -0,0 +1,133 @@
+import HTMLElement from '../html-element/HTMLElement.js';
+import CanvasCaptureMediaStreamTrack from './CanvasCaptureMediaStreamTrack.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
+import Blob from '../../file/Blob.js';
+import OffscreenCanvas from './OffscreenCanvas.js';
+import Event from '../../event/Event.js';
+import MediaStream from '../html-media-element/MediaStream.js';
+
+const DEVICE_ID = 'S3F/aBCdEfGHIjKlMnOpQRStUvWxYz1234567890+1AbC2DEf2GHi3jK34le+ab12C3+1aBCdEf==';
+
+/**
+ * HTMLCanvasElement
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
+ */
+export default class HTMLCanvasElement extends HTMLElement {
+	// Events
+	public oncontextlost: (event: Event) => void | null = null;
+	public oncontextrestored: (event: Event) => void | null = null;
+	public onwebglcontextcreationerror: (event: Event) => void | null = null;
+	public onwebglcontextlost: (event: Event) => void | null = null;
+	public onwebglcontextrestored: (event: Event) => void | null = null;
+
+	/**
+	 * Returns width.
+	 *
+	 * @returns Width.
+	 */
+	public get width(): number {
+		const width = this.getAttribute('width');
+		return width !== null ? Number(width) : 300;
+	}
+
+	/**
+	 * Sets width.
+	 *
+	 * @param width Width.
+	 */
+	public set width(width: number) {
+		this.setAttribute('width', String(width));
+	}
+
+	/**
+	 * Returns height.
+	 *
+	 * @returns Height.
+	 */
+	public get height(): number {
+		const height = this.getAttribute('height');
+		return height !== null ? Number(height) : 150;
+	}
+
+	/**
+	 * Sets height.
+	 *
+	 * @param height Height.
+	 */
+	public set height(height: number) {
+		this.setAttribute('height', String(height));
+	}
+
+	/**
+	 * Returns capture stream.
+	 *
+	 * @param [frameRate] Frame rate.
+	 * @returns Capture stream.
+	 */
+	public captureStream(frameRate?: number): MediaStream {
+		const stream = new MediaStream();
+		const track = new CanvasCaptureMediaStreamTrack(PropertySymbol.illegalConstructor, this);
+
+		track[PropertySymbol.kind] = 'video';
+		track[PropertySymbol.capabilities].deviceId = DEVICE_ID;
+		track[PropertySymbol.capabilities].aspectRatio.max = this.width;
+		track[PropertySymbol.capabilities].height.max = this.height;
+		track[PropertySymbol.capabilities].width.max = this.width;
+		track[PropertySymbol.settings].deviceId = DEVICE_ID;
+
+		if (frameRate !== undefined) {
+			track[PropertySymbol.capabilities].frameRate.max = frameRate;
+			track[PropertySymbol.settings].frameRate = frameRate;
+		}
+
+		stream.addTrack(track);
+
+		return stream;
+	}
+
+	/**
+	 * Returns context.
+	 *
+	 * @param _contextType Context type.
+	 * @param [_contextAttributes] Context attributes.
+	 * @returns Context.
+	 */
+	public getContext(
+		_contextType: '2d' | 'webgl' | 'webgl2' | 'webgpu' | 'bitmaprenderer',
+		_contextAttributes?: { [key: string]: any }
+	): null {
+		return null;
+	}
+
+	/**
+	 * Returns to data URL.
+	 *
+	 * @param [_type] Type.
+	 * @param [_encoderOptions] Quality.
+	 * @returns Data URL.
+	 */
+	public toDataURL(_type?: string, _encoderOptions?: any): string {
+		return '';
+	}
+
+	/**
+	 * Returns to blob.
+	 *
+	 * @param callback Callback.
+	 * @param [_type] Type.
+	 * @param [_quality] Quality.
+	 */
+	public toBlob(callback: (blob: Blob) => void, _type?: string, _quality?: any): void {
+		callback(new Blob([]));
+	}
+
+	/**
+	 * Transfers control to offscreen.
+	 *
+	 * @returns Offscreen canvas.
+	 */
+	public transferControlToOffscreen(): OffscreenCanvas {
+		return new OffscreenCanvas(this.width, this.height);
+	}
+}

package/src/nodes/html-canvas-element/ImageBitmap.ts

@@ -0,0 +1,27 @@
+/**
+ * Image Bitmap.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap
+ */
+export default class ImageBitmap {
+	public height: number;
+	public width: number;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param width Width.
+	 * @param height Height.
+	 */
+	constructor(width: number, height: number) {
+		this.width = width;
+		this.height = height;
+	}
+
+	/**
+	 * Disposes of all graphical resources associated with an ImageBitmap.
+	 */
+	public close(): void {
+		// TODO: Not implemented.
+	}
+}

package/src/nodes/html-canvas-element/OffscreenCanvas.ts

@@ -0,0 +1,58 @@
+import Blob from '../../file/Blob.js';
+import ImageBitmap from './ImageBitmap.js';
+
+/**
+ * OffscreenCanvas.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/OffscreenCanvas
+ */
+export default class OffscreenCanvas {
+	public readonly width: number;
+	public readonly height: number;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param width Width.
+	 * @param height Height.
+	 */
+	constructor(width: number, height: number) {
+		this.width = width;
+		this.height = height;
+	}
+
+	/**
+	 * Returns context.
+	 *
+	 * @param _contextType Context type.
+	 * @param [_contextAttributes] Context attributes.
+	 * @returns Context.
+	 */
+	public getContext(
+		_contextType: '2d' | 'webgl' | 'webgl2' | 'webgpu' | 'bitmaprenderer',
+		_contextAttributes?: { [key: string]: any }
+	): null {
+		return null;
+	}
+
+	/**
+	 * Converts the canvas to a Blob.
+	 *
+	 * @param [_options] Options.
+	 * @param [_options.type] Type.
+	 * @param [_options.quality] Quality.
+	 * @returns Blob.
+	 */
+	public async convertToBlob(_options?: { type?: string; quality?: any }): Promise<Blob> {
+		return new Blob([]);
+	}
+
+	/**
+	 * Creates an ImageBitmap object from the most recently rendered image of the OffscreenCanvas.
+	 *
+	 * @returns ImageBitmap.
+	 */
+	public transferToImageBitmap(): ImageBitmap {
+		return new ImageBitmap(this.width, this.height);
+	}
+}

package/src/nodes/html-d-list-element/HTMLDListElement.ts

@@ -0,0 +1,7 @@
+import HTMLElement from '../html-element/HTMLElement.js';
+/**
+ * HTMLDListElement
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDListElement
+ */
+export default class HTMLDListElement extends HTMLElement {}

package/src/nodes/html-data-element/HTMLDataElement.ts

@@ -0,0 +1,25 @@
+import HTMLElement from '../html-element/HTMLElement.js';
+/**
+ * HTMLDataElement
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDataElement
+ */
+export default class HTMLDataElement extends HTMLElement {
+	/**
+	 * Returns value.
+	 *
+	 * @returns Value.
+	 */
+	public get value(): string {
+		return this.getAttribute('value') || '';
+	}
+
+	/**
+	 * Sets value.
+	 *
+	 * @param value Value.
+	 */
+	public set value(value: string) {
+		this.setAttribute('value', value);
+	}
+}

package/src/nodes/html-data-list-element/HTMLDataListElement.ts

@@ -0,0 +1,28 @@
+import HTMLElement from '../html-element/HTMLElement.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
+import HTMLCollection from '../element/HTMLCollection.js';
+import HTMLOptionElement from '../html-option-element/HTMLOptionElement.js';
+import ParentNodeUtility from '../parent-node/ParentNodeUtility.js';
+
+/**
+ * HTMLDataListElement
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDataListElement
+ */
+export default class HTMLDataListElement extends HTMLElement {
+	public [PropertySymbol.options]: HTMLCollection<HTMLOptionElement> | null = null;
+
+	/**
+	 * Returns options.
+	 *
+	 * @returns Options.
+	 */
+	public get options(): HTMLCollection<HTMLOptionElement> {
+		if (!this[PropertySymbol.options]) {
+			this[PropertySymbol.options] = <HTMLCollection<HTMLOptionElement>>(
+				ParentNodeUtility.getElementsByTagName(this, 'OPTION')
+			);
+		}
+		return this[PropertySymbol.options];
+	}
+}

package/src/nodes/html-details-element/HTMLDetailsElement.ts

@@ -0,0 +1,59 @@
+import Event from '../../event/Event.js';
+import HTMLElement from '../html-element/HTMLElement.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
+import Attr from '../attr/Attr.js';
+
+/**
+ * HTMLDetailsElement
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement
+ */
+export default class HTMLDetailsElement extends HTMLElement {
+	// Events
+	public ontoggle: (event: Event) => void | null = null;
+
+	/**
+	 * Returns the open attribute.
+	 */
+	public get open(): boolean {
+		return this.getAttribute('open') !== null;
+	}
+
+	/**
+	 * Sets the open attribute.
+	 *
+	 * @param open New value.
+	 */
+	public set open(open: boolean) {
+		if (open) {
+			this.setAttribute('open', '');
+		} else {
+			this.removeAttribute('open');
+		}
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.onSetAttribute](
+		attribute: Attr,
+		replacedAttribute: Attr | null
+	): void {
+		super[PropertySymbol.onSetAttribute](attribute, replacedAttribute);
+		if (attribute[PropertySymbol.name] === 'open') {
+			if (attribute[PropertySymbol.value] !== replacedAttribute?.[PropertySymbol.value]) {
+				this.dispatchEvent(new Event('toggle'));
+			}
+		}
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.onRemoveAttribute](removedAttribute: Attr): void {
+		super[PropertySymbol.onRemoveAttribute](removedAttribute);
+		if (removedAttribute && removedAttribute[PropertySymbol.name] === 'open') {
+			this.dispatchEvent(new Event('toggle'));
+		}
+	}
+}

package/src/nodes/html-dialog-element/HTMLDialogElement.ts

@@ -5,8 +5,7 @@ import * as PropertySymbol from '../../PropertySymbol.js';
 /**
  * HTML Dialog Element.
  *
- * Reference:
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
  */
 export default class HTMLDialogElement extends HTMLElement {
 	// Internal properties

package/src/nodes/html-div-element/HTMLDivElement.ts

@@ -0,0 +1,7 @@
+import HTMLElement from '../html-element/HTMLElement.js';
+/**
+ * HTMLDivElement
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement
+ */
+export default class HTMLDivElement extends HTMLElement {}

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

@@ -6,13 +6,7 @@ import NodeTypeEnum from '../node/NodeTypeEnum.js';
 import DOMException from '../../exception/DOMException.js';
 import Event from '../../event/Event.js';
 import HTMLElementUtility from './HTMLElementUtility.js';
-import NamedNodeMap from '../../named-node-map/NamedNodeMap.js';
-import HTMLElementNamedNodeMap from './HTMLElementNamedNodeMap.js';
-import NodeList from '../node/NodeList.js';
-import Node from '../node/Node.js';
-import HTMLCollection from '../element/HTMLCollection.js';
-import DatasetFactory from '../element/DatasetFactory.js';
-import IDataset from '../element/IDataset.js';
+import DOMStringMap from '../element/DOMStringMap.js';
 
 /**
  * HTML Element.
@@ -22,7 +16,7 @@ import IDataset from '../element/IDataset.js';
  */
 export default class HTMLElement extends Element {
 	// Public properties
-	public cloneNode: (deep?: boolean) => HTMLElement;
+	public declare cloneNode: (deep?: boolean) => HTMLElement;
 
 	// Events
 	public oncopy: (event: Event) => void | null = null;
@@ -52,7 +46,6 @@ export default class HTMLElement extends Element {
 	public ontransitionstart: (event: Event) => void | null = null;
 
 	// Internal properties
-	public override [PropertySymbol.attributes]: NamedNodeMap = new HTMLElementNamedNodeMap(this);
 	public [PropertySymbol.accessKey] = '';
 	public [PropertySymbol.contentEditable] = 'inherit';
 	public [PropertySymbol.isContentEditable] = false;
@@ -65,10 +58,8 @@ export default class HTMLElement extends Element {
 	public [PropertySymbol.clientLeft] = 0;
 	public [PropertySymbol.clientTop] = 0;
 	public [PropertySymbol.style]: CSSStyleDeclaration = null;
-
-	// Private properties
-	#dataset: IDataset = null;
-	#customElementDefineCallback: () => void = null;
+	private [PropertySymbol.dataset]: DOMStringMap | null = null;
+	private [PropertySymbol.customElementDefineCallback]: () => void = null;
 
 	/**
 	 * Returns access key.
@@ -223,7 +214,7 @@ export default class HTMLElement extends Element {
 
 		let result = '';
 
-		for (const childNode of this[PropertySymbol.childNodes]) {
+		for (const childNode of this[PropertySymbol.nodeArray]) {
 			if (childNode[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
 				const childElement = <HTMLElement>childNode;
 				const computedStyle =
@@ -275,17 +266,20 @@ export default class HTMLElement extends Element {
 	 * @param innerText Inner text.
 	 */
 	public set innerText(text: string) {
-		for (const child of this[PropertySymbol.childNodes].slice()) {
-			this.removeChild(child);
+		const childNodes = this[PropertySymbol.nodeArray];
+
+		while (childNodes.length) {
+			this.removeChild(childNodes[0]);
 		}
 
 		const texts = text.split(/[\n\r]/);
+		const ownerDocument = this[PropertySymbol.ownerDocument];
 
 		for (let i = 0, max = texts.length; i < max; i++) {
 			if (i !== 0) {
-				this.appendChild(this[PropertySymbol.ownerDocument].createElement('br'));
+				this.appendChild(ownerDocument.createElement('br'));
 			}
-			this.appendChild(this[PropertySymbol.ownerDocument].createTextNode(texts[i]));
+			this.appendChild(ownerDocument.createTextNode(texts[i]));
 		}
 	}
 
@@ -357,8 +351,8 @@ export default class HTMLElement extends Element {
 	 *
 	 * @returns Data set.
 	 */
-	public get dataset(): IDataset {
-		return (this.#dataset ??= DatasetFactory.createDataset(this));
+	public get dataset(): DOMStringMap {
+		return (this[PropertySymbol.dataset] ??= new DOMStringMap(this));
 	}
 
 	/**
@@ -465,7 +459,8 @@ export default class HTMLElement extends Element {
 	public click(): void {
 		const event = new PointerEvent('click', {
 			bubbles: true,
-			composed: true
+			composed: true,
+			cancelable: true
 		});
 		event[PropertySymbol.target] = this;
 		event[PropertySymbol.currentTarget] = this;
@@ -496,20 +491,14 @@ export default class HTMLElement extends Element {
 		clone[PropertySymbol.contentEditable] = this[PropertySymbol.contentEditable];
 		clone[PropertySymbol.isContentEditable] = this[PropertySymbol.isContentEditable];
 
-		if (this[PropertySymbol.style]) {
-			clone.style.cssText = this[PropertySymbol.style].cssText;
-		}
-
 		return clone;
 	}
 
 	/**
-	 * Connects this element to another element.
-	 *
+	 * @override
 	 * @see https://html.spec.whatwg.org/multipage/dom.html#htmlelement
-	 * @param parentNode Parent node.
 	 */
-	public [PropertySymbol.connectToNode](parentNode: Node = null): void {
+	public override [PropertySymbol.connectedToNode](): void {
 		const localName = this[PropertySymbol.localName];
 
 		// This element can potentially be a custom element that has not been defined yet
@@ -526,77 +515,60 @@ export default class HTMLElement extends Element {
 					PropertySymbol.callbacks
 				];
 
-			if (parentNode && !this.#customElementDefineCallback) {
+			if (!this[PropertySymbol.customElementDefineCallback]) {
 				const callback = (): void => {
 					if (this[PropertySymbol.parentNode]) {
 						const newElement = <HTMLElement>(
 							this[PropertySymbol.ownerDocument].createElement(localName)
 						);
-						(<NodeList<Node>>newElement[PropertySymbol.childNodes]) =
-							this[PropertySymbol.childNodes];
-						(<HTMLCollection<Element>>newElement[PropertySymbol.children]) =
-							this[PropertySymbol.children];
-						(<boolean>newElement[PropertySymbol.isConnected]) = this[PropertySymbol.isConnected];
+						const newCache = newElement[PropertySymbol.cache];
+						newElement[PropertySymbol.nodeArray] = this[PropertySymbol.nodeArray];
+						newElement[PropertySymbol.elementArray] = this[PropertySymbol.elementArray];
+						newElement[PropertySymbol.childNodes] = null;
+						newElement[PropertySymbol.children] = null;
+						newElement[PropertySymbol.isConnected] = this[PropertySymbol.isConnected];
 
 						newElement[PropertySymbol.rootNode] = this[PropertySymbol.rootNode];
 						newElement[PropertySymbol.formNode] = this[PropertySymbol.formNode];
+						newElement[PropertySymbol.parentNode] = this[PropertySymbol.parentNode];
 						newElement[PropertySymbol.selectNode] = this[PropertySymbol.selectNode];
 						newElement[PropertySymbol.textAreaNode] = this[PropertySymbol.textAreaNode];
-						newElement[PropertySymbol.observers] = this[PropertySymbol.observers];
+						newElement[PropertySymbol.mutationListeners] = this[PropertySymbol.mutationListeners];
 						newElement[PropertySymbol.isValue] = this[PropertySymbol.isValue];
-
-						for (let i = 0, max = this[PropertySymbol.attributes].length; i < max; i++) {
-							newElement[PropertySymbol.attributes].setNamedItem(
-								this[PropertySymbol.attributes][i]
-							);
+						newElement[PropertySymbol.cache] = this[PropertySymbol.cache];
+						newElement[PropertySymbol.affectsCache] = this[PropertySymbol.affectsCache];
+						newElement[PropertySymbol.attributes][PropertySymbol.namedItems] =
+							this[PropertySymbol.attributes][PropertySymbol.namedItems];
+						newElement[PropertySymbol.attributes][PropertySymbol.namespaceItems] =
+							this[PropertySymbol.attributes][PropertySymbol.namespaceItems];
+
+						for (const attr of newElement[PropertySymbol.attributes][
+							PropertySymbol.namedItems
+						].values()) {
+							attr[PropertySymbol.ownerElement] = newElement;
 						}
 
-						(<NodeList<Node>>this[PropertySymbol.childNodes]) = new NodeList();
-						(<HTMLCollection<Element>>this[PropertySymbol.children]) = new HTMLCollection();
+						this[PropertySymbol.nodeArray] = [];
+						this[PropertySymbol.elementArray] = [];
+						this[PropertySymbol.childNodes] = null;
+						this[PropertySymbol.children] = null;
+
 						this[PropertySymbol.rootNode] = null;
 						this[PropertySymbol.formNode] = null;
 						this[PropertySymbol.selectNode] = null;
 						this[PropertySymbol.textAreaNode] = null;
-						this[PropertySymbol.observers] = [];
+						this[PropertySymbol.mutationListeners] = [];
 						this[PropertySymbol.isValue] = null;
-						(<HTMLElementNamedNodeMap>this[PropertySymbol.attributes]) =
-							new HTMLElementNamedNodeMap(this);
-
-						for (
-							let i = 0,
-								max = (<HTMLElement>this[PropertySymbol.parentNode])[PropertySymbol.childNodes]
-									.length;
-							i < max;
-							i++
-						) {
-							if (
-								(<HTMLElement>this[PropertySymbol.parentNode])[PropertySymbol.childNodes][i] ===
-								this
-							) {
-								(<HTMLElement>this[PropertySymbol.parentNode])[PropertySymbol.childNodes][i] =
-									newElement;
-								break;
-							}
-						}
+						this[PropertySymbol.cache] = newCache;
+						this[PropertySymbol.affectsCache] = [];
+						this[PropertySymbol.attributes][PropertySymbol.namedItems] = new Map();
+						this[PropertySymbol.attributes][PropertySymbol.namespaceItems] = new Map();
 
-						if ((<HTMLElement>this[PropertySymbol.parentNode])[PropertySymbol.children]) {
-							for (
-								let i = 0,
-									max = (<HTMLElement>this[PropertySymbol.parentNode])[PropertySymbol.children]
-										.length;
-								i < max;
-								i++
-							) {
-								if (
-									(<HTMLElement>this[PropertySymbol.parentNode])[PropertySymbol.children][i] ===
-									this
-								) {
-									(<HTMLElement>this[PropertySymbol.parentNode])[PropertySymbol.children][i] =
-										newElement;
-									break;
-								}
-							}
-						}
+						const parentChildNodes = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
+						const parentChildElements =
+							this[PropertySymbol.parentNode][PropertySymbol.elementArray];
+						parentChildNodes[parentChildNodes.indexOf(this)] = newElement;
+						parentChildElements[parentChildElements.indexOf(this)] = newElement;
 
 						if (newElement[PropertySymbol.isConnected] && newElement.connectedCallback) {
 							const result = <void | Promise<void>>newElement.connectedCallback();
@@ -618,24 +590,52 @@ export default class HTMLElement extends Element {
 							}
 						}
 
-						this[PropertySymbol.connectToNode](null);
+						this[PropertySymbol.disconnectedFromDocument]();
 					}
 				};
 				callbacks[localName] = callbacks[localName] || [];
 				callbacks[localName].push(callback);
-				this.#customElementDefineCallback = callback;
-			} else if (!parentNode && callbacks[localName] && this.#customElementDefineCallback) {
-				const index = callbacks[localName].indexOf(this.#customElementDefineCallback);
+				this[PropertySymbol.customElementDefineCallback] = callback;
+			}
+		}
+
+		super[PropertySymbol.connectedToNode]();
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.disconnectedFromNode](): void {
+		const localName = this[PropertySymbol.localName];
+
+		// This element can potentially be a custom element that has not been defined yet
+		// Therefore we need to register a callback for when it is defined in CustomElementRegistry and replace it with the registered element (see #404)
+		if (
+			this.constructor === HTMLElement &&
+			localName.includes('-') &&
+			this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].customElements[
+				PropertySymbol.callbacks
+			]
+		) {
+			const callbacks =
+				this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].customElements[
+					PropertySymbol.callbacks
+				];
+
+			if (callbacks[localName] && this[PropertySymbol.customElementDefineCallback]) {
+				const index = callbacks[localName].indexOf(
+					this[PropertySymbol.customElementDefineCallback]
+				);
 				if (index !== -1) {
 					callbacks[localName].splice(index, 1);
 				}
 				if (!callbacks[localName].length) {
 					delete callbacks[localName];
 				}
-				this.#customElementDefineCallback = null;
+				this[PropertySymbol.customElementDefineCallback] = null;
 			}
 		}
 
-		super[PropertySymbol.connectToNode](parentNode);
+		super[PropertySymbol.disconnectedFromNode]();
 	}
 }

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

@@ -29,14 +29,16 @@ export default class HTMLElementUtility {
 			new FocusEvent('blur', {
 				relatedTarget,
 				bubbles: false,
-				composed: true
+				composed: true,
+				cancelable: true
 			})
 		);
 		element.dispatchEvent(
 			new FocusEvent('focusout', {
 				relatedTarget,
 				bubbles: true,
-				composed: true
+				composed: true,
+				cancelable: true
 			})
 		);
 	}