breaking: use CustomEvent constructor instead of deprecated `create…

…Event` method (#8775)

closes #8474

.changeset/odd-wasps-smoke.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: use `CustomEvent` constructor instead of deprecated `createEvent` method

documentation/docs/05-misc/04-v4-migration-guide.md

@@ -151,6 +151,7 @@ The order in which preprocessors are applied has changed. Now, preprocessors are
 
 - the `inert` attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628))
 - the runtime now uses `classList.toggle(name, boolean)` which may not work in very old browsers. Consider using a [polyfill](https://github.com/eligrey/classList.js) if you need to support these browsers. ([#8629](https://github.com/sveltejs/svelte/issues/8629))
+- the runtime now uses the `CustomElement` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775))
 - people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750))
 - `derived` will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947))
 - type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5

packages/svelte/src/runtime/internal/dom.js

@@ -1005,12 +1005,7 @@ export function toggle_class(element, name, toggle) {
  * @returns {CustomEvent<T>}
  */
 export function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
-	/**
-	 * @type {CustomEvent<T>}
-	 */
-	const e = document.createEvent('CustomEvent');
-	e.initCustomEvent(type, bubbles, cancelable, detail);
-	return e;
+	return new CustomEvent(type, { detail, bubbles, cancelable });
 }
 
 /**