From a03b3f30143d634e1ab659c55d84b844d2f5c708 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 17 Mar 2026 10:26:49 +0100
Subject: [PATCH 01/88] feat: custom renderers api

---
 packages/svelte/package.json                  |  4 +++
 packages/svelte/renderer.d.ts                 |  1 +
 packages/svelte/scripts/generate-types.js     |  3 +-
 .../compiler/phases/1-parse/read/options.js   |  4 +++
 .../phases/2-analyze/visitors/Attribute.js    |  7 +++--
 .../3-transform/client/transform-client.js    | 28 +++++++++++++++++--
 .../client/transform-template/index.js        |  3 +-
 .../client/visitors/RegularElement.js         |  3 +-
 packages/svelte/src/compiler/types/index.d.ts |  4 +++
 .../svelte/src/compiler/types/template.d.ts   |  3 +-
 .../svelte/src/compiler/utils/builders.js     |  4 +--
 .../svelte/src/compiler/validate-options.js   |  2 ++
 .../internal/client/custom-renderer/index.js  | 28 +++++++++++++++++++
 .../internal/client/custom-renderer/state.js  | 20 +++++++++++++
 packages/svelte/src/internal/client/index.js  |  1 +
 packages/svelte/src/renderer/index.js         |  1 +
 packages/svelte/types/index.d.ts              | 17 ++++++++++-
 17 files changed, 122 insertions(+), 11 deletions(-)
 create mode 100644 packages/svelte/renderer.d.ts
 create mode 100644 packages/svelte/src/internal/client/custom-renderer/index.js
 create mode 100644 packages/svelte/src/internal/client/custom-renderer/state.js
 create mode 100644 packages/svelte/src/renderer/index.js

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 49c53a26eb..e06a9bf4a8 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -90,6 +90,10 @@
     "./reactivity/window": {
       "types": "./types/index.d.ts",
       "default": "./src/reactivity/window/index.js"
+    },
+	"./renderer": {
+      "types": "./types/index.d.ts",
+      "default": "./src/renderer/index.js"
     },
     "./server": {
       "types": "./types/index.d.ts",
diff --git a/packages/svelte/renderer.d.ts b/packages/svelte/renderer.d.ts
new file mode 100644
index 0000000000..a1a0ce5223
--- /dev/null
+++ b/packages/svelte/renderer.d.ts
@@ -0,0 +1 @@
+import './types/index.js';
diff --git a/packages/svelte/scripts/generate-types.js b/packages/svelte/scripts/generate-types.js
index 0ee6004d4a..bdbde7a505 100644
--- a/packages/svelte/scripts/generate-types.js
+++ b/packages/svelte/scripts/generate-types.js
@@ -8,7 +8,7 @@ const pkg = JSON.parse(fs.readFileSync(`${dir}/package.json`, 'utf-8'));
 
 // For people not using moduleResolution: 'bundler', we need to generate these files. Think about removing this in Svelte 6 or 7
 // It may look weird, but the imports MUST be ending with index.js to be properly resolved in all TS modes
-for (const name of ['action', 'animate', 'easing', 'motion', 'store', 'transition', 'legacy']) {
+for (const name of ['action', 'animate', 'easing', 'motion', 'store', 'transition', 'legacy', 'renderer']) {
 	fs.writeFileSync(`${dir}/${name}.d.ts`, "import './types/index.js';\n");
 }
 
@@ -44,6 +44,7 @@ await createBundle({
 		[`${pkg.name}/motion`]: `${dir}/src/motion/public.d.ts`,
 		[`${pkg.name}/reactivity`]: `${dir}/src/reactivity/index-client.js`,
 		[`${pkg.name}/reactivity/window`]: `${dir}/src/reactivity/window/index.js`,
+		[`${pkg.name}/renderer`]: `${dir}/src/internal/client/custom-renderer/index.js`,
 		[`${pkg.name}/server`]: `${dir}/src/server/index.d.ts`,
 		[`${pkg.name}/store`]: `${dir}/src/store/public.d.ts`,
 		[`${pkg.name}/transition`]: `${dir}/src/transition/public.d.ts`,
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index 2677fb3b61..dc14bd47f8 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -36,6 +36,10 @@ export default function read_options(node) {
 				e.svelte_options_deprecated_tag(attribute);
 				break; // eslint doesn't know this is unnecessary
 			}
+			case 'customRenderer': {
+				component_options.customRenderer = get_static_value(attribute);
+				break;
+			}
 			case 'customElement': {
 				/** @type {AST.SvelteOptions['customElement']} */
 				const ce = {};
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 2b7d636606..838cbf0413 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -59,8 +59,11 @@ export function Attribute(node, context) {
 				context.state.analysis.uses_event_attributes = true;
 			}
 
-			node.metadata.delegated =
-				parent?.type === 'RegularElement' && can_delegate_event(node.name.slice(2));
+			// we can't delegate event handlers in a non dom environment
+			if (!context.state.options.customRenderer) {
+				node.metadata.delegated =
+					parent?.type === 'RegularElement' && can_delegate_event(node.name.slice(2));
+			}
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index b50a73b8b6..75e12876a2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -138,6 +138,19 @@ const visitors = {
 	VariableDeclaration
 };
 
+/**
+ * @param {string} custom_renderer_module
+ */
+function custom_renderer_imports(custom_renderer_module) {
+	const imports = [
+		b.import_all('$', 'svelte/internal/client'),
+	]
+	if(custom_renderer_module){
+		imports.push(b.imports([['$renderer', '$renderer', true]], custom_renderer_module));
+	}
+	return imports;
+}
+
 /**
  * @param {ComponentAnalysis} analysis
  * @param {ValidatedCompileOptions} options
@@ -151,7 +164,9 @@ export function client_component(analysis, options) {
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
 		is_instance: false,
-		hoisted: [b.import_all('$', 'svelte/internal/client'), ...analysis.instance_body.hoisted],
+		hoisted: [
+			...custom_renderer_imports(options.customRenderer), ...analysis.instance_body.hoisted
+		],
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),
@@ -392,6 +407,13 @@ export function client_component(analysis, options) {
 		);
 	}
 
+	if (options.customRenderer) {
+		component_block.body.unshift(
+			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
+		);
+		component_block.body.push(b.stmt(b.call('$$pop_renderer')));
+	}
+
 	let should_inject_props =
 		should_inject_context ||
 		analysis.needs_props ||
@@ -562,7 +584,9 @@ export function client_component(analysis, options) {
 		body.unshift(b.imports([], 'svelte/internal/flags/tracing'));
 	}
 
-	if (options.discloseVersion) {
+	// disclose version attach the svelte version to `window` which is not guaranteed
+	// to be a thing in custom renderers environments
+	if (options.discloseVersion && !options.customRenderer) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
index 40c0907e38..e34bfc0123 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -35,7 +35,8 @@ function build_locations(nodes) {
  * @param {number} [flags]
  */
 export function transform_template(state, namespace, flags = 0) {
-	const tree = state.options.fragments === 'tree';
+	// custom renderers needs a tree to work because there's no template element we can use
+	const tree = state.options.fragments === 'tree' || !!state.options.customRenderer;
 
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 0579d80b74..ec74c3ed27 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -47,7 +47,8 @@ export function RegularElement(node, context) {
 		return;
 	}
 
-	const is_custom_element = is_custom_element_node(node);
+	// we never treat elements as custom element in custom renderers, since we don't want to apply special handling to them (e.g. class merging)
+	const is_custom_element = is_custom_element_node(node) && !context.state.options.customRenderer;
 
 	// cloneNode is faster, but it does not instantiate the underlying class of the
 	// custom element until the template is connected to the dom, which would
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index fce3f62c5c..325d87ef6a 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -132,6 +132,10 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * @since 5.33
 	 */
 	fragments?: 'html' | 'tree';
+	/**
+	 *  Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
+	 */
+	customRenderer?: string;
 	/**
 	 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 	 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 3c1e3e772c..ea2f2bd9f7 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -85,9 +85,10 @@ export namespace AST {
 		preserveWhitespace?: boolean;
 		namespace?: Namespace;
 		css?: 'injected';
+		customRenderer?: string;
 		customElement?: {
 			tag?: string;
-			shadow?: 'open' | 'none' | ObjectExpression | undefined;
+			shadow?: 'open' | 'none';
 			props?: Record<
 				string,
 				{
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index 223676d22f..d4679ff8d7 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -637,7 +637,7 @@ export function import_all(as, source) {
 }
 
 /**
- * @param {Array<[string, string]>} parts
+ * @param {Array<[string, string] | [string, string, boolean]>} parts
  * @param {string} source
  * @returns {ESTree.ImportDeclaration}
  */
@@ -647,7 +647,7 @@ export function imports(parts, source) {
 		attributes: [],
 		source: literal(source),
 		specifiers: parts.map((p) => ({
-			type: 'ImportSpecifier',
+			type: p[2] ? 'ImportDefaultSpecifier' : 'ImportSpecifier',
 			imported: id(p[0]),
 			local: id(p[1])
 		}))
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index a94a553311..e0215b4eff 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -83,6 +83,8 @@ const component_options = {
 
 	immutable: deprecate(w.options_deprecated_immutable, boolean(false)),
 
+	customRenderer: string(undefined),
+
 	legacy: removed(
 		'The legacy option has been removed. If you are using this because of legacy.componentApi, use compatibility.componentApi instead'
 	),
diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
new file mode 100644
index 0000000000..29f8bb19a6
--- /dev/null
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -0,0 +1,28 @@
+import { branch, effect_root } from "../reactivity/effects";
+import { push_renderer } from "./state";
+
+/**
+ * @param {*} renderer
+ * @returns
+ */
+export function createRenderer(renderer) {
+	return {
+		...renderer,
+		/**
+		 * @param {*} Component
+		 * @param {*} options
+		 */
+		render(Component, { target, props }) {
+			var cleanup = push_renderer(renderer);
+			const unmount = effect_root(() => {
+				var anchor = renderer.createComment('');
+				renderer.insert(target, anchor, null);
+				branch(() => {
+					Component(anchor, props);
+				});
+			});
+			cleanup();
+			return unmount;
+		}
+	};
+}
\ No newline at end of file
diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
new file mode 100644
index 0000000000..c1075ed454
--- /dev/null
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -0,0 +1,20 @@
+/**
+ * @type {any}
+ */
+let renderer = null;
+
+export function get_renderer() {
+	return renderer;
+}
+
+/**
+ *
+ * @param {any} $renderer
+ */
+export function push_renderer($renderer) {
+	let old_renderer = renderer;
+	renderer = $renderer;
+	return () => {
+		renderer = old_renderer;
+	};
+}
\ No newline at end of file
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 988998d067..97f891058d 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -181,3 +181,4 @@ export {
 export { strict_equals, equals } from './dev/equality.js';
 export { log_if_contains_state } from './dev/console-log.js';
 export { invoke_error_boundary } from './error-handling.js';
+export { push_renderer } from "./custom-renderer/state.js"
\ No newline at end of file
diff --git a/packages/svelte/src/renderer/index.js b/packages/svelte/src/renderer/index.js
new file mode 100644
index 0000000000..3377f7f1cb
--- /dev/null
+++ b/packages/svelte/src/renderer/index.js
@@ -0,0 +1 @@
+export { createRenderer } from '../internal/client/custom-renderer/index.js';
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 31ef9110df..9305513278 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1089,6 +1089,10 @@ declare module 'svelte/compiler' {
 		 * @since 5.33
 		 */
 		fragments?: 'html' | 'tree';
+		/**
+		 *  Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
+		 */
+		customRenderer?: string;
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -1240,9 +1244,10 @@ declare module 'svelte/compiler' {
 			preserveWhitespace?: boolean;
 			namespace?: Namespace;
 			css?: 'injected';
+			customRenderer?: string;
 			customElement?: {
 				tag?: string;
-				shadow?: 'open' | 'none' | ObjectExpression | undefined;
+				shadow?: 'open' | 'none';
 				props?: Record<
 					string,
 					{
@@ -2557,6 +2562,12 @@ declare module 'svelte/reactivity/window' {
 	export {};
 }
 
+declare module 'svelte/renderer' {
+	export function createRenderer(renderer: any): any;
+
+	export {};
+}
+
 declare module 'svelte/server' {
 	import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte';
 	/**
@@ -3065,6 +3076,10 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * @since 5.33
 		 */
 		fragments?: 'html' | 'tree';
+		/**
+		 *  Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
+		 */
+		customRenderer?: string;
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.

From 23e52db4e04911efd585973748b8d82f77dd75f1 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 27 Mar 2026 10:34:17 +0100
Subject: [PATCH 02/88] chore: better types

---
 .../internal/client/custom-renderer/index.js  | 35 ++++++++++++++++---
 .../internal/client/custom-renderer/state.js  | 14 ++++++--
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index 29f8bb19a6..b7ade121f8 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -1,9 +1,34 @@
-import { branch, effect_root } from "../reactivity/effects";
-import { push_renderer } from "./state";
+import { branch, effect_root } from '../reactivity/effects';
+import { push_renderer } from './state';
 
 /**
- * @param {*} renderer
- * @returns
+ * @template [TFragment=any]
+ * @template [TElement=any]
+ * @template [TTextNode=any]
+ * @template [TComment=any]
+ * @template [TNode=TElement | TTextNode | TComment | TFragment]
+ * @typedef {Object} Renderer
+ * @property {()=>TFragment} createFragment
+ * @property {(name: string)=>TElement} createElement
+ * @property {(data: string)=>TTextNode} createTextNode
+ * @property {(element: TElement, key: string, value: any)=>void} setAttribute
+ * @property {(node: TNode, text: string)=>void} setText
+ * @property {(data: string)=>TComment} createComment
+ * @property {(element: TNode)=>TNode} getFirstChild
+ * @property {(element: TNode)=>TNode} getLastChild
+ * @property {(element: TNode)=>TNode} getNextSibling
+ * @property {(parent: TNode, element: TNode, anchor: TNode | null)=>void} insert
+ * @property {(node: TNode)=>void} remove
+ * @property {(element: TNode)=>TNode} getParent
+ */
+
+/**
+ * @template [const TFragment=unknown]
+ * @template [const TElement=unknown]
+ * @template [const TTextNode=unknown]
+ * @template [const TComment=unknown]
+ * @param {Renderer<TFragment, TElement, TTextNode, TComment>} renderer
+ * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TNode, props?: any }) => () => void }}
  */
 export function createRenderer(renderer) {
 	return {
@@ -25,4 +50,4 @@ export function createRenderer(renderer) {
 			return unmount;
 		}
 	};
-}
\ No newline at end of file
+}
diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index c1075ed454..9eee42e14a 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -1,15 +1,23 @@
 /**
- * @type {any}
+ * @import { Renderer } from ".";
+ */
+
+/**
+ * @type {Renderer | null}
  */
 let renderer = null;
 
+/**
+ *
+ * @returns {Renderer | null}
+ */
 export function get_renderer() {
 	return renderer;
 }
 
 /**
  *
- * @param {any} $renderer
+ * @param {Renderer} $renderer
  */
 export function push_renderer($renderer) {
 	let old_renderer = renderer;
@@ -17,4 +25,4 @@ export function push_renderer($renderer) {
 	return () => {
 		renderer = old_renderer;
 	};
-}
\ No newline at end of file
+}

From 101d1cebdcc96afc0f721df9a652f183ba790f82 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 28 Mar 2026 15:16:31 +0100
Subject: [PATCH 03/88] chore: better types and more complete interface

---
 .../internal/client/custom-renderer/index.js  | 36 +++++---
 packages/svelte/types/index.d.ts              | 89 ++++++++++++++++++-
 2 files changed, 110 insertions(+), 15 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index b7ade121f8..e6ea2e29b5 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -6,20 +6,28 @@ import { push_renderer } from './state';
  * @template [TElement=any]
  * @template [TTextNode=any]
  * @template [TComment=any]
- * @template [TNode=TElement | TTextNode | TComment | TFragment]
+ * @template [TNode=TFragment | TElement | TTextNode | TComment]
  * @typedef {Object} Renderer
- * @property {()=>TFragment} createFragment
- * @property {(name: string)=>TElement} createElement
- * @property {(data: string)=>TTextNode} createTextNode
- * @property {(element: TElement, key: string, value: any)=>void} setAttribute
- * @property {(node: TNode, text: string)=>void} setText
- * @property {(data: string)=>TComment} createComment
- * @property {(element: TNode)=>TNode} getFirstChild
- * @property {(element: TNode)=>TNode} getLastChild
- * @property {(element: TNode)=>TNode} getNextSibling
- * @property {(parent: TNode, element: TNode, anchor: TNode | null)=>void} insert
- * @property {(node: TNode)=>void} remove
- * @property {(element: TNode)=>TNode} getParent
+ * @property {()=>TFragment} createFragment - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
+ * @property {(name: string)=>TElement} createElement - Creates an element with the given name.
+ * @property {(data: string)=>TTextNode} createTextNode - Creates a text node with the given data.
+ * @property {(data: string)=>TComment} createComment - Creates a comment node with the given data. This is often used as an anchor for inserting elements, it doesn't necessarily need to be rendered
+ * @property {(node: TNode)=> "fragment" | "element" | "text" | "comment"} nodeType - Should return the type of the node in string form ("fragment", "element", "text", "comment").
+ * @property {(node: TNode)=>string | null} getNodeValue - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
+ * @property {(element: TElement, name: string)=>string | null} getAttribute - Return the value of the attribute with the given name on the element, or null if it doesn't exist
+ * @property {(element: TElement, key: string, value: any)=>void} setAttribute - Set the attribute with the given name and value on the element
+ * @property {(element: TElement, name: string)=>void} removeAttribute - Remove the attribute with the given name from the element
+ * @property {(element: TElement, name: string)=>boolean} hasAttribute - Return true if the element has an attribute with the given name
+ * @property {(node: TNode, text: string)=>void} setText - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
+ * @property {(element: TElement | TFragment)=>TNode} getFirstChild - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
+ * @property {(element: TElement | TFragment)=>TNode} getLastChild - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
+ * @property {(element: TNode)=>TNode} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
+ * @property {(parent: TElement | TFragment, element: TNode, anchor: TNode | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents
+ * @property {(node: TNode)=>void} remove - Remove the node from the tree
+ * @property {(element: TNode)=>TNode} getParent - Return the parent of the element, or null if it has no parent
+ * @property {(node: TNode, deep: boolean)=>TNode} cloneNode - Return a clone of the node. If deep is true, all of the node's children should also be cloned
+ * @property {(target: TNode, type: string, handler: any, options?: any)=>void} addEventListener - Add an event listener of the given type and handler to the target node, with optional options
+ * @property {(target: TNode, type: string, handler: any, options?: any)=>void} removeEventListener - Remove an event listener of the given type and handler from the target node, with optional options
  */
 
 /**
@@ -28,7 +36,7 @@ import { push_renderer } from './state';
  * @template [const TTextNode=unknown]
  * @template [const TComment=unknown]
  * @param {Renderer<TFragment, TElement, TTextNode, TComment>} renderer
- * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TNode, props?: any }) => () => void }}
+ * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TFragment | TElement | TTextNode | TComment, props?: any }) => () => void }}
  */
 export function createRenderer(renderer) {
 	return {
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 51b9d079f4..4b73972af1 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2568,7 +2568,94 @@ declare module 'svelte/reactivity/window' {
 }
 
 declare module 'svelte/renderer' {
-	export function createRenderer(renderer: any): any;
+	export function createRenderer<const TFragment = unknown, const TElement = unknown, const TTextNode = unknown, const TComment = unknown>(renderer: Renderer<TFragment, TElement, TTextNode, TComment>): Renderer<TFragment, TElement, TTextNode, TComment> & {
+		render: (Component: any, options: {
+			target: TFragment | TElement | TTextNode | TComment;
+			props?: any;
+		}) => () => void;
+	};
+	export type Renderer<TFragment = any, TElement = any, TTextNode = any, TComment = any, TNode = TFragment | TElement | TTextNode | TComment> = {
+		/**
+		 * - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
+		 */
+		createFragment: () => TFragment;
+		/**
+		 * - Creates an element with the given name.
+		 */
+		createElement: (name: string) => TElement;
+		/**
+		 * - Creates a text node with the given data.
+		 */
+		createTextNode: (data: string) => TTextNode;
+		/**
+		 * - Creates a comment node with the given data. This is often used as an anchor for inserting elements, it doesn't necessarily need to be rendered
+		 */
+		createComment: (data: string) => TComment;
+		/**
+		 * - Should return the type of the node in string form ("fragment", "element", "text", "comment").
+		 */
+		nodeType: (node: TNode) => "fragment" | "element" | "text" | "comment";
+		/**
+		 * - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
+		 */
+		getNodeValue: (node: TNode) => string | null;
+		/**
+		 * - Return the value of the attribute with the given name on the element, or null if it doesn't exist
+		 */
+		getAttribute: (element: TElement, name: string) => string | null;
+		/**
+		 * - Set the attribute with the given name and value on the element
+		 */
+		setAttribute: (element: TElement, key: string, value: any) => void;
+		/**
+		 * - Remove the attribute with the given name from the element
+		 */
+		removeAttribute: (element: TElement, name: string) => void;
+		/**
+		 * - Return true if the element has an attribute with the given name
+		 */
+		hasAttribute: (element: TElement, name: string) => boolean;
+		/**
+		 * - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
+		 */
+		setText: (node: TNode, text: string) => void;
+		/**
+		 * - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
+		 */
+		getFirstChild: (element: TElement | TFragment) => TNode;
+		/**
+		 * - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
+		 */
+		getLastChild: (element: TElement | TFragment) => TNode;
+		/**
+		 * - Return the next sibling of the node, or null if it has no next sibling
+		 */
+		getNextSibling: (element: TNode) => TNode;
+		/**
+		 * - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents
+		 */
+		insert: (parent: TElement | TFragment, element: TNode, anchor: TNode | null) => void;
+		/**
+		 * - Remove the node from the tree
+		 */
+		remove: (node: TNode) => void;
+		/**
+		 * - Return the parent of the element, or null if it has no parent
+		 */
+		getParent: (element: TNode) => TNode;
+		/**
+		 * - Return a clone of the node. If deep is true, all of the node's children should also be cloned
+		 */
+		cloneNode: (node: TNode, deep: boolean) => TNode;
+		/**
+		 * - Add an event listener of the given type and handler to the target node, with optional options
+		 */
+		addEventListener: (target: TNode, type: string, handler: any, options?: any) => void;
+		/**
+		 * - Remove an event listener of the given type and handler from the target node, with optional options
+		 */
+		removeEventListener: (target: TNode, type: string, handler: any, options?: any) => void;
+	};
 
 	export {};
 }

From ac40179686b72deb6a5de6bdef0ae5d12e147777 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 28 Mar 2026 15:16:54 +0100
Subject: [PATCH 04/88] chore: remove getter

---
 .../src/internal/client/custom-renderer/state.js       | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 9eee42e14a..2f0bf8b174 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -5,15 +5,7 @@
 /**
  * @type {Renderer | null}
  */
-let renderer = null;
-
-/**
- *
- * @returns {Renderer | null}
- */
-export function get_renderer() {
-	return renderer;
-}
+export let renderer = null;
 
 /**
  *

From 0a0212c86ecc57ab95f01870329340b3c94188b7 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 28 Mar 2026 15:19:27 +0100
Subject: [PATCH 05/88] chore: new operations functions to replace direct DOM
 access

---
 .../svelte/src/internal/client/constants.js   |   8 +
 .../src/internal/client/dom/operations.js     | 489 +++++++++++++++++-
 2 files changed, 486 insertions(+), 11 deletions(-)

diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index df96f4899b..032b6c3e2b 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -69,6 +69,7 @@ export const STALE_REACTION = new (class StaleReactionError extends Error {
 	message = 'The reaction that called `getAbortSignal()` was re-run or destroyed';
 })();
 
+// TODO: DOM access
 export const IS_XHTML =
 	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
 	!!globalThis.document?.contentType &&
@@ -77,3 +78,10 @@ export const ELEMENT_NODE = 1;
 export const TEXT_NODE = 3;
 export const COMMENT_NODE = 8;
 export const DOCUMENT_FRAGMENT_NODE = 11;
+
+export const CUSTOM_RENDERER_NODE_TYPE_MAP = /** @type {const} */ ({
+	fragment: DOCUMENT_FRAGMENT_NODE,
+	element: ELEMENT_NODE,
+	text: TEXT_NODE,
+	comment: COMMENT_NODE
+});
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 4036aa2d61..52c68291ca 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -5,9 +5,15 @@ import { init_array_prototype_warnings } from '../dev/equality.js';
 import { get_descriptor, is_extensible } from '../../shared/utils.js';
 import { active_effect } from '../runtime.js';
 import { async_mode_flag } from '../../flags/index.js';
-import { TEXT_NODE, REACTION_RAN } from '#client/constants';
+import {
+	TEXT_NODE,
+	REACTION_RAN,
+	CUSTOM_RENDERER_NODE_TYPE_MAP,
+	COMMENT_NODE
+} from '#client/constants';
 import { eager_block_effects } from '../reactivity/batch.js';
 import { NAMESPACE_HTML } from '../../../constants.js';
+import { renderer } from '../custom-renderer/state.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -78,6 +84,7 @@ export function init_operations() {
  * @returns {Text}
  */
 export function create_text(value = '') {
+	if (renderer) return /** @type {Text} */ (renderer.createTextNode(value));
 	return document.createTextNode(value);
 }
 
@@ -87,6 +94,7 @@ export function create_text(value = '') {
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function get_first_child(node) {
+	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getFirstChild(node));
 	return /** @type {TemplateNode | null} */ (first_child_getter.call(node));
 }
 
@@ -96,6 +104,7 @@ export function get_first_child(node) {
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function get_next_sibling(node) {
+	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getNextSibling(node));
 	return /** @type {TemplateNode | null} */ (next_sibling_getter.call(node));
 }
 
@@ -115,10 +124,10 @@ export function child(node, is_text) {
 
 	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
 	if (child === null) {
-		child = hydrate_node.appendChild(create_text());
-	} else if (is_text && child.nodeType !== TEXT_NODE) {
+		child = /** @type {TemplateNode} */ (append_child(hydrate_node, create_text()));
+	} else if (is_text && node_type(child) !== TEXT_NODE) {
 		var text = create_text();
-		child?.before(text);
+		insert_before(child, text);
 		set_hydrate_node(text);
 		return text;
 	}
@@ -142,7 +151,8 @@ export function first_child(node, is_text = false) {
 		var first = get_first_child(node);
 
 		// TODO prevent user comments with the empty string when preserveComments is true
-		if (first instanceof Comment && first.data === '') return get_next_sibling(first);
+		// TODO RENDERER: can we find another way to not have an `isComment` on the renderer?
+		if (is_comment(first) && get_node_value(first) === '') return get_next_sibling(first);
 
 		return first;
 	}
@@ -150,10 +160,10 @@ export function first_child(node, is_text = false) {
 	if (is_text) {
 		// if an {expression} is empty during SSR, there might be no
 		// text node to hydrate — we must therefore create one
-		if (hydrate_node?.nodeType !== TEXT_NODE) {
+		if (node_type(hydrate_node) !== TEXT_NODE) {
 			var text = create_text();
 
-			hydrate_node?.before(text);
+			if (hydrate_node) insert_before(hydrate_node, text);
 			set_hydrate_node(text);
 			return text;
 		}
@@ -187,15 +197,15 @@ export function sibling(node, count = 1, is_text = false) {
 	if (is_text) {
 		// if a sibling {expression} is empty during SSR, there might be no
 		// text node to hydrate — we must therefore create one
-		if (next_sibling?.nodeType !== TEXT_NODE) {
+		if (node_type(next_sibling) !== TEXT_NODE) {
 			var text = create_text();
 			// If the next sibling is `null` and we're handling text then it's because
 			// the SSR content was empty for the text, so we need to generate a new text
 			// node and insert it after the last sibling
 			if (next_sibling === null) {
-				last_sibling?.after(text);
+				if (last_sibling) insert_after(last_sibling, text);
 			} else {
-				next_sibling.before(text);
+				insert_before(next_sibling, text);
 			}
 			set_hydrate_node(text);
 			return text;
@@ -214,6 +224,15 @@ export function sibling(node, count = 1, is_text = false) {
  * @returns {void}
  */
 export function clear_text_content(node) {
+	if (renderer) {
+		var child = renderer.getFirstChild(node);
+		while (child !== null) {
+			var next = renderer.getNextSibling(child);
+			renderer.remove(child);
+			child = next;
+		}
+		return;
+	}
 	node.textContent = '';
 }
 
@@ -239,6 +258,10 @@ export function should_defer_append() {
  * @returns {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element}
  */
 export function create_element(tag, namespace, is) {
+	if (renderer)
+		return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
+			renderer.createElement(tag)
+		);
 	let options = is ? { is } : undefined;
 	return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
 		document.createElementNS(namespace ?? NAMESPACE_HTML, tag, options)
@@ -246,6 +269,7 @@ export function create_element(tag, namespace, is) {
 }
 
 export function create_fragment() {
+	if (renderer) return /** @type {DocumentFragment} */ (renderer.createFragment());
 	return document.createDocumentFragment();
 }
 
@@ -254,6 +278,7 @@ export function create_fragment() {
  * @returns
  */
 export function create_comment(data = '') {
+	if (renderer) return /** @type {Comment} */ (renderer.createComment(data));
 	return document.createComment(data);
 }
 
@@ -264,6 +289,10 @@ export function create_comment(data = '') {
  * @returns
  */
 export function set_attribute(element, key, value = '') {
+	if (renderer) {
+		renderer.setAttribute(element, key, value);
+		return;
+	}
 	if (key.startsWith('xlink:')) {
 		element.setAttributeNS('http://www.w3.org/1999/xlink', key, value);
 		return;
@@ -277,13 +306,16 @@ export function set_attribute(element, key, value = '') {
  * @param {Text} text
  */
 export function merge_text_nodes(text) {
+	// if we have a renderer we will not hydrate so we can skip this
+	if (renderer) return;
+
 	if (/** @type {string} */ (text.nodeValue).length < 65536) {
 		return;
 	}
 
 	let next = text.nextSibling;
 
-	while (next !== null && next.nodeType === TEXT_NODE) {
+	while (next !== null && node_type(next) === TEXT_NODE) {
 		next.remove();
 
 		/** @type {string} */ (text.nodeValue) += /** @type {string} */ (next.nodeValue);
@@ -291,3 +323,438 @@ export function merge_text_nodes(text) {
 		next = text.nextSibling;
 	}
 }
+
+/**
+ * @param {TemplateNode | null} node
+ * @returns {node is Comment}
+ */
+function is_comment(node) {
+	if (renderer) return !!node && node_type(node) === COMMENT_NODE;
+	return node instanceof Comment;
+}
+
+/**
+ * @param {Node | null | undefined} node
+ */
+export function node_type(node) {
+	if (node == null) return undefined;
+	if (renderer) {
+		const type = renderer.nodeType(node);
+		return CUSTOM_RENDERER_NODE_TYPE_MAP[type];
+	}
+	return node?.nodeType;
+}
+
+/**
+ * @param {Node | null | undefined} node
+ */
+export function node_name(node) {
+	if (node == null) return undefined;
+	if (renderer) {
+		return '';
+	}
+	return node?.nodeName;
+}
+
+/**
+ * @param {Node} node
+ * @returns {TemplateNode | null}
+ */
+export function get_last_child(node) {
+	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getLastChild(node));
+	return /** @type {TemplateNode | null} */ (node.lastChild);
+}
+
+/**
+ * @param {Node} node
+ * @returns {TemplateNode | null}
+ */
+export function get_parent_node(node) {
+	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getParent(node));
+	return /** @type {TemplateNode | null} */ (node.parentNode);
+}
+
+/**
+ * @param {Node} parent
+ * @param {Node} child
+ * @returns {Node}
+ */
+export function append_child(parent, child) {
+	if (renderer) {
+		renderer.insert(parent, child, null);
+		return child;
+	}
+	return parent.appendChild(child);
+}
+
+/**
+ * Insert `new_node` before `ref_node` (equivalent to `ref_node.before(new_node)`)
+ * @param {ChildNode} ref_node
+ * @param {Node} new_node
+ */
+export function insert_before(ref_node, new_node) {
+	if (renderer) {
+		var parent = renderer.getParent(ref_node);
+		renderer.insert(parent, new_node, ref_node);
+		return;
+	}
+	ref_node.before(new_node);
+}
+
+/**
+ * Insert `new_node` after `ref_node` (equivalent to `ref_node.after(new_node)`)
+ * @param {ChildNode} ref_node
+ * @param {Node} new_node
+ */
+export function insert_after(ref_node, new_node) {
+	if (renderer) {
+		var parent = renderer.getParent(ref_node);
+		var next = renderer.getNextSibling(ref_node);
+		renderer.insert(parent, new_node, next);
+		return;
+	}
+	ref_node.after(new_node);
+}
+
+/**
+ * @param {ChildNode} node
+ */
+export function remove_node(node) {
+	if (renderer) {
+		renderer.remove(node);
+		return;
+	}
+	node.remove();
+}
+
+/**
+ * @param {Node} parent
+ * @param {ChildNode} child
+ * @returns {ChildNode}
+ */
+export function remove_child(parent, child) {
+	if (renderer) {
+		renderer.remove(child);
+		return child;
+	}
+	return /** @type {ChildNode} */ (parent.removeChild(child));
+}
+
+/**
+ * @param {ChildNode} old_node
+ * @param {Node} new_node
+ */
+export function replace_with(old_node, new_node) {
+	if (renderer) {
+		var parent = renderer.getParent(old_node);
+		renderer.insert(parent, new_node, old_node);
+		renderer.remove(old_node);
+		return;
+	}
+	old_node.replaceWith(new_node);
+}
+
+/**
+ * @param {Node} node
+ * @param {string} value
+ */
+export function set_text_content(node, value) {
+	if (renderer) {
+		renderer.setText(node, value);
+		return;
+	}
+	node.textContent = value;
+}
+
+/**
+ * @param {Node} node
+ * @param {string} value
+ */
+export function set_node_value(node, value) {
+	if (renderer) {
+		renderer.setText(node, value);
+		return;
+	}
+	node.nodeValue = value;
+}
+
+// --- Helpers for style attribute string manipulation (custom renderer) ---
+
+/**
+ * @param {string} style_string
+ * @param {string} property
+ * @param {string} value
+ * @param {string} [priority]
+ * @returns {string}
+ */
+function set_style_property_in_string(style_string, property, value, priority) {
+	var declaration = property + ': ' + value + (priority ? ' !' + priority : '');
+	var parts = style_string.split(';');
+	var found = false;
+
+	for (var i = 0; i < parts.length; i++) {
+		var colon_index = parts[i].indexOf(':');
+		if (colon_index !== -1 && parts[i].substring(0, colon_index).trim() === property) {
+			parts[i] = ' ' + declaration;
+			found = true;
+			break;
+		}
+	}
+
+	if (!found) {
+		parts.push(' ' + declaration);
+	}
+
+	return parts
+		.map((p) => p.trim())
+		.filter(Boolean)
+		.join('; ');
+}
+
+/**
+ * @param {string} style_string
+ * @param {string} property
+ * @returns {string}
+ */
+function remove_style_property_in_string(style_string, property) {
+	return style_string
+		.split(';')
+		.filter((part) => {
+			var colon_index = part.indexOf(':');
+			if (colon_index === -1) return false;
+			return part.substring(0, colon_index).trim() !== property;
+		})
+		.map((p) => p.trim())
+		.filter(Boolean)
+		.join('; ');
+}
+
+/**
+ * @param {Node} node
+ * @returns {string | null}
+ */
+export function get_node_value(node) {
+	if (renderer) return renderer.getNodeValue(node);
+	return node.nodeValue;
+}
+
+/**
+ * @param {Element} element
+ * @param {string} name
+ * @returns {string | null}
+ */
+export function get_attribute(element, name) {
+	if (renderer) return renderer.getAttribute(element, name);
+	return element.getAttribute(name);
+}
+
+/**
+ * @param {Element} element
+ * @param {string} name
+ */
+export function remove_attribute(element, name) {
+	if (renderer) {
+		renderer.removeAttribute(element, name);
+		return;
+	}
+	element.removeAttribute(name);
+}
+
+/**
+ * @param {Element} element
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function has_attribute(element, name) {
+	// TODO RENDERER: could be worth removing and just using get?
+
+	if (renderer) return renderer.hasAttribute(element, name);
+	return element.hasAttribute(name);
+}
+
+/**
+ * @param {Element} element
+ * @param {string} value
+ */
+export function set_inner_html(element, value) {
+	if (renderer) {
+		throw new Error('setInnerHTML is not supported with custom renderers');
+	}
+	element.innerHTML = value;
+}
+
+/**
+ * @param {Node} node
+ * @param {boolean} deep
+ * @returns {Node}
+ */
+export function clone_node(node, deep) {
+	if (renderer) return renderer.cloneNode(node, deep);
+	return node.cloneNode(deep);
+}
+
+/**
+ * @param {Node} node
+ * @param {boolean} deep
+ * @returns {Node}
+ */
+export function import_node(node, deep) {
+	if (renderer) return renderer.cloneNode(node, deep);
+	return document.importNode(node, deep);
+}
+
+/**
+ * @param {EventTarget} target
+ * @param {string} type
+ * @param {EventListenerOrEventListenerObject} handler
+ * @param {boolean | AddEventListenerOptions} [options]
+ */
+export function add_event_listener(target, type, handler, options) {
+	if (renderer) {
+		renderer.addEventListener(target, type, handler, options);
+		return;
+	}
+	target.addEventListener(type, handler, options);
+}
+
+/**
+ * @param {EventTarget} target
+ * @param {string} type
+ * @param {EventListenerOrEventListenerObject} handler
+ * @param {boolean | EventListenerOptions} [options]
+ */
+export function remove_event_listener(target, type, handler, options) {
+	if (renderer) {
+		renderer.removeEventListener(target, type, handler, options);
+		return;
+	}
+	target.removeEventListener(type, handler, options);
+}
+
+/**
+ * @param {EventTarget} target
+ * @param {Event} event
+ * @returns {boolean}
+ */
+export function dispatch_event(target, event) {
+	if (renderer) {
+		// is only used in SSR which is not a thing for custom renderers
+		throw new Error('dispatchEvent is not supported with custom renderers');
+	}
+	return target.dispatchEvent(event);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} property
+ * @param {string} value
+ * @param {string} [priority]
+ */
+export function style_set_property(element, property, value, priority) {
+	if (renderer) {
+		var style = renderer.getAttribute(element, 'style') || '';
+		var updated = set_style_property_in_string(style, property, value, priority);
+		renderer.setAttribute(element, 'style', updated);
+		return;
+	}
+	element.style.setProperty(property, value, priority);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} property
+ */
+export function style_remove_property(element, property) {
+	if (renderer) {
+		var style = renderer.getAttribute(element, 'style') || '';
+		var updated = remove_style_property_in_string(style, property);
+		renderer.setAttribute(element, 'style', updated);
+		return;
+	}
+	element.style.removeProperty(property);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} value
+ */
+export function set_css_text(element, value) {
+	if (renderer) {
+		renderer.setAttribute(element, 'style', value);
+		return;
+	}
+	element.style.cssText = value;
+}
+
+/**
+ * @param {Element} element
+ * @param {string} name
+ * @param {boolean} force
+ */
+export function class_list_toggle(element, name, force) {
+	if (renderer) {
+		const classes = element.getAttribute('class')?.split(/\s+/) ?? [];
+		const has_class = classes.includes(name);
+		if (force === has_class) {
+			return;
+		}
+		if (force) {
+			classes.push(name);
+		} else {
+			const index = classes.indexOf(name);
+			if (index !== -1) {
+				classes.splice(index, 1);
+			}
+		}
+		element.setAttribute('class', classes.join(' '));
+		return;
+	}
+	element.classList.toggle(name, force);
+}
+
+/**
+ * @param {Element} element
+ * @param {string} selector
+ */
+export function query_selector(element, selector) {
+	if (renderer) {
+		// TODO RENDERER: just used with css inject which doesn't make sense with custom renderers
+		throw new Error('querySelector is not supported with custom renderers');
+	}
+	return element.querySelector(selector);
+}
+
+/**
+ * @param {Element | DocumentFragment} element
+ * @param {string} selector
+ */
+export function query_selector_all(element, selector) {
+	if (renderer) {
+		// TODO RENDERER: just used with css inject which doesn't make sense with custom renderers
+		throw new Error('querySelectorAll is not supported with custom renderers');
+	}
+	return element.querySelectorAll(selector);
+}
+
+/**
+ * @param {Node} node
+ * @returns {Node}
+ */
+export function get_root_node(node) {
+	if (renderer) {
+		// TODO RENDERER: just used with css inject which doesn't make sense with custom renderers
+		throw new Error('getRootNode is not supported with custom renderers');
+	}
+	return node.getRootNode();
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+export function focus(element) {
+	if (renderer) {
+		// doesn't make sense with custom renderers
+		throw new Error('focus is not supported with custom renderers');
+	}
+	element.focus();
+}

From 4eb2c0bd807c9fe2ac2501ec30ff4901ae3f70bf Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 28 Mar 2026 16:00:26 +0100
Subject: [PATCH 06/88] fix: import correctly

---
 packages/svelte/src/internal/client/custom-renderer/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index e6ea2e29b5..c7a2d95772 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -1,5 +1,5 @@
-import { branch, effect_root } from '../reactivity/effects';
-import { push_renderer } from './state';
+import { branch, effect_root } from '../reactivity/effects.js';
+import { push_renderer } from './state.js';
 
 /**
  * @template [TFragment=any]

From 6d13e5a1d097a284bcd4e47327e0638607fcc7ea Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 28 Mar 2026 16:02:07 +0100
Subject: [PATCH 07/88] fix: store current renderer in effect and push it
 before executing it

---
 .../svelte/src/internal/client/reactivity/effects.js  | 11 +++++++----
 .../svelte/src/internal/client/reactivity/types.d.ts  |  3 +++
 packages/svelte/src/internal/client/runtime.js        |  5 +++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 54c8a17d79..6139e22438 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -40,12 +40,13 @@ import {
 import * as e from '../errors.js';
 import { DEV } from 'esm-env';
 import { define_property } from '../../shared/utils.js';
-import { get_next_sibling } from '../dom/operations.js';
+import { get_next_sibling, remove_node, append_child } from '../dom/operations.js';
 import { component_context, dev_current_component_function, dev_stack } from '../context.js';
 import { Batch, collected_effects } from './batch.js';
 import { flatten, increment_pending } from './async.js';
 import { without_reactive_context } from '../dom/elements/bindings/shared.js';
 import { set_signal_status } from './status.js';
+import { renderer } from '../custom-renderer/state.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -113,7 +114,8 @@ function create_effect(type, fn) {
 		prev: null,
 		teardown: null,
 		wv: 0,
-		ac: null
+		ac: null,
+		r: renderer
 	};
 
 	if (DEV) {
@@ -560,6 +562,7 @@ export function destroy_effect(effect, remove_dom = true) {
 		effect.nodes =
 		effect.ac =
 		effect.b =
+		effect.r =
 			null;
 }
 
@@ -573,7 +576,7 @@ export function remove_effect_dom(node, end) {
 		/** @type {TemplateNode | null} */
 		var next = node === end ? null : get_next_sibling(node);
 
-		node.remove();
+		remove_node(/** @type {ChildNode} */ (node));
 		node = next;
 	}
 }
@@ -734,7 +737,7 @@ export function move_effect(effect, fragment) {
 		/** @type {TemplateNode | null} */
 		var next = node === end ? null : get_next_sibling(node);
 
-		fragment.append(node);
+		append_child(fragment, node);
 		node = next;
 	}
 }
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 8477917991..025527e897 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -7,6 +7,7 @@ import type {
 	TransitionManager
 } from '#client';
 import type { Boundary } from '../dom/blocks/boundary';
+import type { Renderer } from '../custom-renderer/index';
 
 export interface Signal {
 	/** Flags bitmask */
@@ -94,6 +95,8 @@ export interface Effect extends Reaction {
 	parent: Effect | null;
 	/** The boundary this effect belongs to */
 	b: Boundary | null;
+	/** The renderer this effect was created with */
+	r: Renderer | null;
 	/** Dev only */
 	component_function?: any;
 	/** Dev only. Only set for certain block effects. Contains a reference to the stack that represents the render tree */
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 906d68fbf0..3d9f1d684b 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -59,6 +59,7 @@ import { captured_signals } from './legacy.js';
 import { without_reactive_context } from './dom/elements/bindings/shared.js';
 import { set_signal_status, update_derived_status } from './reactivity/status.js';
 import * as w from './warnings.js';
+import { push_renderer } from './custom-renderer/state.js';
 
 let is_updating_effect = false;
 
@@ -442,6 +443,8 @@ export function update_effect(effect) {
 	active_effect = effect;
 	is_updating_effect = true;
 
+	var pop_renderer = effect.r !== null ? push_renderer(effect.r) : null;
+
 	if (DEV) {
 		var previous_component_fn = dev_current_component_function;
 		set_dev_current_component_function(effect.component_function);
@@ -476,6 +479,8 @@ export function update_effect(effect) {
 		is_updating_effect = was_updating_effect;
 		active_effect = previous_effect;
 
+		pop_renderer?.();
+
 		if (DEV) {
 			set_dev_current_component_function(previous_component_fn);
 			set_dev_stack(previous_stack);

From a59efbf610c19464b08eb8a15490d78dbc24eddf Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 08:40:04 +0200
Subject: [PATCH 08/88] fix: wrap component in boundary in `render`

---
 .../svelte/src/internal/client/custom-renderer/index.js    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index c7a2d95772..0cf751a73c 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -1,3 +1,4 @@
+import { boundary } from '../dom/blocks/boundary.js';
 import { branch, effect_root } from '../reactivity/effects.js';
 import { push_renderer } from './state.js';
 
@@ -50,8 +51,10 @@ export function createRenderer(renderer) {
 			const unmount = effect_root(() => {
 				var anchor = renderer.createComment('');
 				renderer.insert(target, anchor, null);
-				branch(() => {
-					Component(anchor, props);
+				boundary(/** @type {*} */ (anchor), { pending: () => {} }, (anchor) => {
+					branch(() => {
+						Component(anchor, props);
+					});
 				});
 			});
 			cleanup();

From 432c0235c941e9c19b10377e363a2580638075a9 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 08:43:11 +0200
Subject: [PATCH 09/88] fix: push and pop renderer when needed

---
 .../internal/client/custom-renderer/state.js  |  7 +++
 .../internal/client/dom/blocks/boundary.js    | 38 ++++++++++---
 .../internal/client/dom/blocks/branches.js    | 37 +++++++++---
 .../src/internal/client/dom/blocks/each.js    | 57 +++++++++++++++----
 .../src/internal/client/reactivity/async.js   |  5 ++
 .../src/internal/client/reactivity/effects.js | 10 +++-
 6 files changed, 127 insertions(+), 27 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 2f0bf8b174..90e8f21372 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -7,6 +7,13 @@
  */
 export let renderer = null;
 
+/**
+ * @param {Renderer | null} $renderer
+ */
+export function set_renderer($renderer) {
+	renderer = $renderer;
+}
+
 /**
  *
  * @param {Renderer} $renderer
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index b440bb3ba4..22ec1e7830 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -39,9 +39,16 @@ import { Batch, current_batch, schedule_effect } from '../../reactivity/batch.js
 import { internal_set, source } from '../../reactivity/sources.js';
 import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
-import { create_text } from '../operations.js';
+import {
+	create_text,
+	create_fragment,
+	append_child,
+	insert_before,
+	get_node_value
+} from '../operations.js';
 import { defer_effect } from '../../reactivity/utils.js';
 import { set_signal_status } from '../../reactivity/status.js';
+import { push_renderer } from '../../custom-renderer/state.js';
 
 /**
  * @typedef {{
@@ -164,13 +171,17 @@ export class Boundary {
 				const comment = /** @type {Comment} */ (this.#hydrate_open);
 				hydrate_next();
 
-				const server_rendered_pending = comment.data === HYDRATION_START_ELSE;
-				const server_rendered_failed = comment.data.startsWith(HYDRATION_START_FAILED);
+				const server_rendered_pending = get_node_value(comment) === HYDRATION_START_ELSE;
+				const server_rendered_failed = (get_node_value(comment) ?? '').startsWith(
+					HYDRATION_START_FAILED
+				);
 
 				if (server_rendered_failed) {
 					// Server rendered the failed snippet - hydrate it.
 					// The serialized error is embedded in the comment: <!--[?<json>-->
-					const serialized_error = JSON.parse(comment.data.slice(HYDRATION_START_FAILED.length));
+					const serialized_error = JSON.parse(
+						(get_node_value(comment) ?? '').slice(HYDRATION_START_FAILED.length)
+					);
 					this.#hydrate_failed_content(serialized_error);
 				} else if (server_rendered_pending) {
 					this.#hydrate_pending_content();
@@ -219,17 +230,19 @@ export class Boundary {
 		this.#pending_effect = branch(() => pending(this.#anchor));
 
 		queue_micro_task(() => {
-			var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+			var pop_renderer = this.#effect.r !== null ? push_renderer(this.#effect.r) : null;
+
+			var fragment = (this.#offscreen_fragment = create_fragment());
 			var anchor = create_text();
 
-			fragment.append(anchor);
+			append_child(fragment, anchor);
 
 			this.#main_effect = this.#run(() => {
 				return branch(() => this.#children(anchor));
 			});
 
 			if (this.#pending_count === 0) {
-				this.#anchor.before(fragment);
+				insert_before(this.#anchor, fragment);
 				this.#offscreen_fragment = null;
 
 				pause_effect(/** @type {Effect} */ (this.#pending_effect), () => {
@@ -238,6 +251,8 @@ export class Boundary {
 
 				this.#resolve(/** @type {Batch} */ (current_batch));
 			}
+
+			pop_renderer?.();
 		});
 	}
 
@@ -252,7 +267,7 @@ export class Boundary {
 			});
 
 			if (this.#pending_count > 0) {
-				var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+				var fragment = (this.#offscreen_fragment = create_fragment());
 				move_effect(this.#main_effect, fragment);
 
 				const pending = /** @type {(anchor: Node) => void} */ (this.#props.pending);
@@ -309,6 +324,8 @@ export class Boundary {
 		set_active_reaction(this.#effect);
 		set_component_context(this.#effect.ctx);
 
+		var pop_renderer = this.#effect.r !== null ? push_renderer(this.#effect.r) : null;
+
 		try {
 			Batch.ensure();
 			return fn();
@@ -319,6 +336,7 @@ export class Boundary {
 			set_active_effect(previous_effect);
 			set_active_reaction(previous_reaction);
 			set_component_context(previous_ctx);
+			pop_renderer?.();
 		}
 	}
 
@@ -350,8 +368,10 @@ export class Boundary {
 			}
 
 			if (this.#offscreen_fragment) {
-				this.#anchor.before(this.#offscreen_fragment);
+				var pop_renderer = this.#effect.r !== null ? push_renderer(this.#effect.r) : null;
+				insert_before(this.#anchor, this.#offscreen_fragment);
 				this.#offscreen_fragment = null;
+				pop_renderer?.();
 			}
 		}
 	}
diff --git a/packages/svelte/src/internal/client/dom/blocks/branches.js b/packages/svelte/src/internal/client/dom/blocks/branches.js
index a8096e0a58..ee0efd43f5 100644
--- a/packages/svelte/src/internal/client/dom/blocks/branches.js
+++ b/packages/svelte/src/internal/client/dom/blocks/branches.js
@@ -1,4 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { Renderer } from '../../custom-renderer' */
 import { Batch, current_batch } from '../../reactivity/batch.js';
 import {
 	branch,
@@ -8,7 +9,16 @@ import {
 	resume_effect
 } from '../../reactivity/effects.js';
 import { hydrate_node, hydrating } from '../hydration.js';
-import { create_text, should_defer_append } from '../operations.js';
+import {
+	create_text,
+	should_defer_append,
+	create_fragment,
+	append_child,
+	insert_before,
+	remove_node,
+	get_last_child
+} from '../operations.js';
+import { push_renderer, renderer as current_renderer } from '../../custom-renderer/state.js';
 
 /**
  * @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
@@ -59,6 +69,14 @@ export class BranchManager {
 	 */
 	#transition = true;
 
+	/**
+	 * The renderer that was active when this BranchManager was created.
+	 * Needed so that #commit can push the correct renderer when doing DOM operations
+	 * outside of an effect context (e.g. as a batch commit callback).
+	 * @type {Renderer | null}
+	 */
+	#renderer = null;
+
 	/**
 	 * @param {TemplateNode} anchor
 	 * @param {boolean} transition
@@ -66,6 +84,7 @@ export class BranchManager {
 	constructor(anchor, transition = true) {
 		this.anchor = anchor;
 		this.#transition = transition;
+		this.#renderer = current_renderer;
 	}
 
 	/**
@@ -75,6 +94,8 @@ export class BranchManager {
 		// if this batch was made obsolete, bail
 		if (!this.#batches.has(batch)) return;
 
+		var pop_renderer = this.#renderer !== null ? push_renderer(this.#renderer) : null;
+
 		var key = /** @type {Key} */ (this.#batches.get(batch));
 
 		var onscreen = this.#onscreen.get(key);
@@ -92,10 +113,10 @@ export class BranchManager {
 				this.#offscreen.delete(key);
 
 				// remove the anchor...
-				/** @type {TemplateNode} */ (offscreen.fragment.lastChild).remove();
+				remove_node(/** @type {ChildNode} */ (get_last_child(offscreen.fragment)));
 
 				// ...and append the fragment
-				this.anchor.before(offscreen.fragment);
+				insert_before(this.anchor, offscreen.fragment);
 				onscreen = offscreen.effect;
 			}
 		}
@@ -129,10 +150,10 @@ export class BranchManager {
 
 				if (keys.includes(k)) {
 					// keep the effect offscreen, as another batch will need it
-					var fragment = document.createDocumentFragment();
+					var fragment = create_fragment();
 					move_effect(effect, fragment);
 
-					fragment.append(create_text()); // TODO can we avoid this?
+					append_child(fragment, create_text()); // TODO can we avoid this?
 
 					this.#offscreen.set(k, { effect, fragment });
 				} else {
@@ -150,6 +171,8 @@ export class BranchManager {
 				on_destroy();
 			}
 		}
+
+		pop_renderer?.();
 	};
 
 	/**
@@ -179,10 +202,10 @@ export class BranchManager {
 
 		if (fn && !this.#onscreen.has(key) && !this.#offscreen.has(key)) {
 			if (defer) {
-				var fragment = document.createDocumentFragment();
+				var fragment = create_fragment();
 				var target = create_text();
 
-				fragment.append(target);
+				append_child(fragment, target);
 
 				this.#offscreen.set(key, {
 					effect: branch(() => fn(target)),
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 3acdf80d84..bee21178ae 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -23,7 +23,13 @@ import {
 	create_text,
 	get_first_child,
 	get_next_sibling,
-	should_defer_append
+	should_defer_append,
+	get_parent_node,
+	append_child,
+	create_fragment,
+	insert_before,
+	node_type,
+	get_node_value
 } from '../operations.js';
 import {
 	block,
@@ -43,6 +49,8 @@ import { derived_safe_equal } from '../../reactivity/deriveds.js';
 import { current_batch } from '../../reactivity/batch.js';
 import * as e from '../../errors.js';
 
+import { push_renderer, renderer } from '../../custom-renderer/state.js';
+
 // When making substantive changes to this file, validate them with the each block stress test:
 // https://svelte.dev/playground/1972b2cf46564476ad8c8c6405b23b7b
 // This test also exists in this repo, as `packages/svelte/tests/manual/each-stress-test`
@@ -107,10 +115,10 @@ function pause_effects(state, to_destroy, controlled_anchor) {
 
 		if (fast_path) {
 			var anchor = /** @type {Element} */ (controlled_anchor);
-			var parent_node = /** @type {Element} */ (anchor.parentNode);
+			var parent_node = /** @type {Element} */ (get_parent_node(anchor));
 
 			clear_text_content(parent_node);
-			parent_node.append(anchor);
+			append_child(parent_node, anchor);
 
 			state.items.clear();
 		}
@@ -152,7 +160,7 @@ function destroy_effects(state, to_destroy, remove_dom = true) {
 		if (preserved_effects?.has(e)) {
 			e.f |= EFFECT_OFFSCREEN;
 
-			const fragment = document.createDocumentFragment();
+			const fragment = create_fragment();
 			move_effect(e, fragment);
 		} else {
 			destroy_effect(to_destroy[i], remove_dom);
@@ -163,6 +171,26 @@ function destroy_effects(state, to_destroy, remove_dom = true) {
 /** @type {TemplateNode} */
 var offscreen_anchor;
 
+/**
+ * Returns an anchor node suitable for offscreen rendering.
+ * When a custom renderer is active, the anchor must have a parent
+ * (so that `getParent()` works), so we place the text node inside
+ * a fragment. The result is cached just like the non-renderer path.
+ * @returns {TemplateNode}
+ */
+function get_offscreen_anchor() {
+	if (offscreen_anchor !== undefined) return offscreen_anchor;
+
+	offscreen_anchor = create_text();
+
+	if (renderer) {
+		var fragment = create_fragment();
+		append_child(fragment, offscreen_anchor);
+	}
+
+	return offscreen_anchor;
+}
+
 /**
  * @template V
  * @param {Element | Comment} node The next sibling node, or the parent node if this is a 'controlled' block
@@ -181,12 +209,17 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 	var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
 
+	// Capture the renderer that was active when this each block was created.
+	// Needed so that the commit callback can push the correct renderer when doing
+	// DOM operations outside of an effect context (e.g. as a batch commit callback).
+	var captured_renderer = renderer;
+
 	if (is_controlled) {
 		var parent_node = /** @type {Element} */ (node);
 
 		anchor = hydrating
 			? set_hydrate_node(get_first_child(parent_node))
-			: parent_node.appendChild(create_text());
+			: /** @type {Text} */ (append_child(parent_node, create_text()));
 	}
 
 	if (hydrating) {
@@ -221,6 +254,8 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			return;
 		}
 
+		var pop_renderer = captured_renderer !== null ? push_renderer(captured_renderer) : null;
+
 		state.pending.delete(batch);
 
 		state.fallback = fallback;
@@ -243,6 +278,8 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 				});
 			}
 		}
+
+		pop_renderer?.();
 	}
 
 	/**
@@ -279,8 +316,8 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		for (var index = 0; index < length; index += 1) {
 			if (
 				hydrating &&
-				hydrate_node.nodeType === COMMENT_NODE &&
-				/** @type {Comment} */ (hydrate_node).data === HYDRATION_END
+				node_type(hydrate_node) === COMMENT_NODE &&
+				get_node_value(hydrate_node) === HYDRATION_END
 			) {
 				// The server rendered fewer items than expected,
 				// so break out and continue appending non-hydrated items
@@ -313,7 +350,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			} else {
 				item = create_item(
 					items,
-					first_run ? anchor : (offscreen_anchor ??= create_text()),
+					first_run ? anchor : get_offscreen_anchor(),
 					value,
 					key,
 					index,
@@ -336,7 +373,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			if (first_run) {
 				fallback = branch(() => fallback_fn(anchor));
 			} else {
-				fallback = branch(() => fallback_fn((offscreen_anchor ??= create_text())));
+				fallback = branch(() => fallback_fn(get_offscreen_anchor()));
 				fallback.f |= EFFECT_OFFSCREEN;
 			}
 		}
@@ -708,7 +745,7 @@ function move(effect, next, anchor) {
 
 	while (node !== null) {
 		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
-		dest.before(node);
+		insert_before(dest, node);
 
 		if (node === end) {
 			return;
diff --git a/packages/svelte/src/internal/client/reactivity/async.js b/packages/svelte/src/internal/client/reactivity/async.js
index 7b0b108e4c..fe8e63084b 100644
--- a/packages/svelte/src/internal/client/reactivity/async.js
+++ b/packages/svelte/src/internal/client/reactivity/async.js
@@ -9,6 +9,7 @@ import {
 	set_dev_stack
 } from '../context.js';
 import { Boundary } from '../dom/blocks/boundary.js';
+import { renderer, set_renderer } from '../custom-renderer/state.js';
 import { invoke_error_boundary } from '../error-handling.js';
 import {
 	active_effect,
@@ -113,6 +114,7 @@ export function capture() {
 	var previous_reaction = active_reaction;
 	var previous_component_context = component_context;
 	var previous_batch = /** @type {Batch} */ (current_batch);
+	var previous_renderer = renderer;
 
 	if (DEV) {
 		var previous_dev_stack = dev_stack;
@@ -123,6 +125,8 @@ export function capture() {
 		set_active_reaction(previous_reaction);
 		set_component_context(previous_component_context);
 
+		set_renderer(previous_renderer);
+
 		if (activate_batch && (previous_effect.f & DESTROYED) === 0) {
 			// TODO we only need optional chaining here because `{#await ...}` blocks
 			// are anomalous. Once we retire them we can get rid of it
@@ -221,6 +225,7 @@ export function unset_context(deactivate_batch = true) {
 	set_active_effect(null);
 	set_active_reaction(null);
 	set_component_context(null);
+	set_renderer(null);
 	if (deactivate_batch) current_batch?.deactivate();
 
 	if (DEV) {
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 6139e22438..a33f03fd96 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -46,7 +46,7 @@ import { Batch, collected_effects } from './batch.js';
 import { flatten, increment_pending } from './async.js';
 import { without_reactive_context } from '../dom/elements/bindings/shared.js';
 import { set_signal_status } from './status.js';
-import { renderer } from '../custom-renderer/state.js';
+import { push_renderer, renderer } from '../custom-renderer/state.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -514,6 +514,8 @@ export function destroy_block_effect_children(signal) {
 export function destroy_effect(effect, remove_dom = true) {
 	var removed = false;
 
+	var pop_renderer = effect.r !== null ? push_renderer(effect.r) : null;
+
 	if (
 		(remove_dom || (effect.f & HEAD_EFFECT) !== 0) &&
 		effect.nodes !== null &&
@@ -564,6 +566,8 @@ export function destroy_effect(effect, remove_dom = true) {
 		effect.b =
 		effect.r =
 			null;
+
+	pop_renderer?.();
 }
 
 /**
@@ -729,6 +733,8 @@ export function aborted(effect = /** @type {Effect} */ (active_effect)) {
 export function move_effect(effect, fragment) {
 	if (!effect.nodes) return;
 
+	var pop_renderer = effect.r !== null ? push_renderer(effect.r) : null;
+
 	/** @type {TemplateNode | null} */
 	var node = effect.nodes.start;
 	var end = effect.nodes.end;
@@ -740,4 +746,6 @@ export function move_effect(effect, fragment) {
 		append_child(fragment, node);
 		node = next;
 	}
+
+	pop_renderer?.();
 }

From 9ae3faa09a8b1d2b7921ab3d3dbcd1094dab462f Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 08:51:36 +0200
Subject: [PATCH 10/88] chore: centralize methods in `operations.js`

---
 packages/svelte/src/internal/client/dom/operations.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 52c68291ca..7b592b84f9 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -351,6 +351,8 @@ export function node_type(node) {
 export function node_name(node) {
 	if (node == null) return undefined;
 	if (renderer) {
+		// for custom renderers we don't need to return the node name since all the
+		// checks that we do on specific node names are meant to be for the HTML
 		return '';
 	}
 	return node?.nodeName;
@@ -589,7 +591,9 @@ export function set_inner_html(element, value) {
  * @returns {Node}
  */
 export function clone_node(node, deep) {
-	if (renderer) return renderer.cloneNode(node, deep);
+	if (renderer) {
+		throw new Error('cloneNode is not supported with custom renderers');
+	}
 	return node.cloneNode(deep);
 }
 
@@ -599,7 +603,9 @@ export function clone_node(node, deep) {
  * @returns {Node}
  */
 export function import_node(node, deep) {
-	if (renderer) return renderer.cloneNode(node, deep);
+	if (renderer) {
+		throw new Error('importNode is not supported with custom renderers');
+	}
 	return document.importNode(node, deep);
 }
 

From c459824a883eca3b8770ae2b671d3e36262b960e Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 08:52:13 +0200
Subject: [PATCH 11/88] fix: don't clone node if a renderer is available

---
 .../src/internal/client/dom/template.js       | 95 ++++++++++++-------
 1 file changed, 61 insertions(+), 34 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index a5d0405d0a..d7c57765a4 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -10,7 +10,18 @@ import {
 	create_fragment,
 	create_comment,
 	set_attribute,
-	merge_text_nodes
+	merge_text_nodes,
+	get_last_child,
+	import_node,
+	clone_node,
+	append_child,
+	insert_before,
+	set_text_content,
+	replace_with,
+	node_type,
+	query_selector_all,
+	get_node_value,
+	node_name
 } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.js';
@@ -29,6 +40,7 @@ import {
 	REACTION_RAN,
 	TEXT_NODE
 } from '#client/constants';
+import { renderer } from '../custom-renderer/state.js';
 
 const TEMPLATE_TAG = IS_XHTML ? 'template' : 'TEMPLATE';
 const SCRIPT_TAG = IS_XHTML ? 'script' : 'SCRIPT';
@@ -75,12 +87,12 @@ export function from_html(content, flags) {
 		}
 
 		var clone = /** @type {TemplateNode} */ (
-			use_import_node || is_firefox ? document.importNode(node, true) : node.cloneNode(true)
+			use_import_node || is_firefox ? import_node(node, true) : clone_node(node, true)
 		);
 
 		if (is_fragment) {
 			var start = /** @type {TemplateNode} */ (get_first_child(clone));
-			var end = /** @type {TemplateNode} */ (clone.lastChild);
+			var end = /** @type {TemplateNode} */ (get_last_child(clone));
 
 			assign_nodes(start, end);
 		} else {
@@ -122,20 +134,20 @@ function from_namespace(content, flags, ns = 'svg') {
 			var root = /** @type {Element} */ (get_first_child(fragment));
 
 			if (is_fragment) {
-				node = document.createDocumentFragment();
+				node = create_fragment();
 				while (get_first_child(root)) {
-					node.appendChild(/** @type {TemplateNode} */ (get_first_child(root)));
+					append_child(node, /** @type {TemplateNode} */ (get_first_child(root)));
 				}
 			} else {
 				node = /** @type {Element} */ (get_first_child(root));
 			}
 		}
 
-		var clone = /** @type {TemplateNode} */ (node.cloneNode(true));
+		var clone = /** @type {TemplateNode} */ (clone_node(node, true));
 
 		if (is_fragment) {
 			var start = /** @type {TemplateNode} */ (get_first_child(clone));
-			var end = /** @type {TemplateNode} */ (clone.lastChild);
+			var end = /** @type {TemplateNode} */ (get_last_child(clone));
 
 			assign_nodes(start, end);
 		} else {
@@ -173,13 +185,13 @@ function fragment_from_tree(structure, ns) {
 
 	for (var item of structure) {
 		if (typeof item === 'string') {
-			fragment.append(create_text(item));
+			append_child(fragment, create_text(item));
 			continue;
 		}
 
 		// if `preserveComments === true`, comments are represented as `['// <data>']`
 		if (item === undefined || item[0][0] === '/') {
-			fragment.append(create_comment(item ? item[0].slice(3) : ''));
+			append_child(fragment, create_comment(item ? item[0].slice(3) : ''));
 			continue;
 		}
 
@@ -195,16 +207,18 @@ function fragment_from_tree(structure, ns) {
 
 		if (children.length > 0) {
 			var target =
-				element.nodeName === TEMPLATE_TAG
-					? /** @type {HTMLTemplateElement} */ (element).content
+				node_name(element) === TEMPLATE_TAG
+					? // TODO: DOM access
+						/** @type {HTMLTemplateElement} */ (element).content
 					: element;
 
-			target.append(
-				fragment_from_tree(children, element.nodeName === 'foreignObject' ? undefined : namespace)
+			append_child(
+				target,
+				fragment_from_tree(children, node_name(element) === 'foreignObject' ? undefined : namespace)
 			);
 		}
 
-		fragment.append(element);
+		append_child(fragment, element);
 	}
 
 	return fragment;
@@ -229,7 +243,10 @@ export function from_tree(structure, flags) {
 			return hydrate_node;
 		}
 
-		if (node === undefined) {
+		// for the custom renderer we skip the cloning and create new nodes every time...a bit less efficient
+		// but save custom renderers implementors from having to implement importNode or cloneNode
+		// which can be a pain
+		if (node === undefined || renderer != null) {
 			const ns =
 				(flags & TEMPLATE_USE_SVG) !== 0
 					? NAMESPACE_SVG
@@ -242,12 +259,16 @@ export function from_tree(structure, flags) {
 		}
 
 		var clone = /** @type {TemplateNode} */ (
-			use_import_node || is_firefox ? document.importNode(node, true) : node.cloneNode(true)
+			renderer != null
+				? node
+				: use_import_node || is_firefox
+					? import_node(node, true)
+					: clone_node(node, true)
 		);
 
 		if (is_fragment) {
 			var start = /** @type {TemplateNode} */ (get_first_child(clone));
-			var end = /** @type {TemplateNode} */ (clone.lastChild);
+			var end = /** @type {TemplateNode} */ (get_last_child(clone));
 
 			assign_nodes(start, end);
 		} else {
@@ -275,31 +296,34 @@ function run_scripts(node) {
 	// scripts were SSR'd, in which case they will run
 	if (hydrating) return node;
 
-	const is_fragment = node.nodeType === DOCUMENT_FRAGMENT_NODE;
+	const is_fragment = node_type(node) === DOCUMENT_FRAGMENT_NODE;
 	const scripts =
-		/** @type {HTMLElement} */ (node).nodeName === SCRIPT_TAG
+		// TODO RENDERER: figure out what to do here
+		node_name(node) === SCRIPT_TAG
 			? [/** @type {HTMLScriptElement} */ (node)]
-			: node.querySelectorAll('script');
+			: query_selector_all(node, 'script');
 
 	const effect = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);
 
 	for (const script of scripts) {
 		const clone = create_element('script');
+		// TODO: DOM access
 		for (var attribute of script.attributes) {
-			clone.setAttribute(attribute.name, attribute.value);
+			set_attribute(clone, attribute.name, attribute.value);
 		}
 
-		clone.textContent = script.textContent;
+		// TODO: DOM access
+		set_text_content(clone, script.textContent ?? '');
 
 		// The script has changed - if it's at the edges, the effect now points at dead nodes
-		if (is_fragment ? node.firstChild === script : node === script) {
+		if (is_fragment ? get_first_child(node) === script : node === script) {
 			effect.nodes.start = clone;
 		}
-		if (is_fragment ? node.lastChild === script : node === script) {
+		if (is_fragment ? get_last_child(node) === script : node === script) {
 			effect.nodes.end = clone;
 		}
 
-		script.replaceWith(clone);
+		replace_with(script, clone);
 	}
 	return node;
 }
@@ -317,9 +341,9 @@ export function text(value = '') {
 
 	var node = hydrate_node;
 
-	if (node.nodeType !== TEXT_NODE) {
+	if (node_type(node) !== TEXT_NODE) {
 		// if an {expression} is empty during SSR, we need to insert an empty text node
-		node.before((node = create_text()));
+		insert_before(node, (node = create_text()));
 		set_hydrate_node(node);
 	} else {
 		merge_text_nodes(/** @type {Text} */ (node));
@@ -339,10 +363,11 @@ export function comment() {
 		return hydrate_node;
 	}
 
-	var frag = document.createDocumentFragment();
-	var start = document.createComment('');
+	var frag = create_fragment();
+	var start = create_comment('');
 	var anchor = create_text();
-	frag.append(start, anchor);
+	append_child(frag, start);
+	append_child(frag, anchor);
 
 	assign_nodes(start, anchor);
 
@@ -375,24 +400,26 @@ export function append(anchor, dom) {
 		return;
 	}
 
-	anchor.before(/** @type {Node} */ (dom));
+	insert_before(anchor, /** @type {Node} */ (dom));
 }
 
 /**
  * Create (or hydrate) an unique UID for the component instance.
  */
 export function props_id() {
+	let node_value;
 	if (
 		hydrating &&
 		hydrate_node &&
-		hydrate_node.nodeType === COMMENT_NODE &&
-		hydrate_node.textContent?.startsWith(`$`)
+		node_type(hydrate_node) === COMMENT_NODE &&
+		(node_value = get_node_value(hydrate_node))?.startsWith(`$`)
 	) {
-		const id = hydrate_node.textContent.substring(1);
+		const id = node_value.substring(1);
 		hydrate_next();
 		return id;
 	}
 
+	// TODO RENDERER: figure out what to do here
 	// @ts-expect-error This way we ensure the id is unique even across Svelte runtimes
 	(window.__svelte ??= {}).uid ??= 1;
 

From cf874c0ab9bf53999438c6bcf04c16adea1d4bbb Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 08:53:56 +0200
Subject: [PATCH 12/88] fix: generate types

---
 packages/svelte/types/index.d.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 4b73972af1..a3a02eddd3 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2643,10 +2643,6 @@ declare module 'svelte/renderer' {
 		 * - Return the parent of the element, or null if it has no parent
 		 */
 		getParent: (element: TNode) => TNode;
-		/**
-		 * - Return a clone of the node. If deep is true, all of the node's children should also be cloned
-		 */
-		cloneNode: (node: TNode, deep: boolean) => TNode;
 		/**
 		 * - Add an event listener of the given type and handler to the target node, with optional options
 		 */

From bd70ab621c237d00597d409fff2ad84ec8bc98a2 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 10:33:36 +0200
Subject: [PATCH 13/88] fix: events dom access

---
 .../internal/client/dom/elements/events.js    | 42 ++++++++++++-------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index e598a78949..23022170eb 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -11,6 +11,14 @@ import {
 	set_active_reaction
 } from '../../runtime.js';
 import { without_reactive_context } from './bindings/shared.js';
+import {
+	remove_attribute,
+	dispatch_event,
+	add_event_listener,
+	remove_event_listener,
+	get_parent_node
+} from '../operations.js';
+import { renderer } from '../../custom-renderer/state.js';
 
 /**
  * Used on elements, as a map of event type -> event handler,
@@ -30,10 +38,11 @@ export const root_event_handles = new Set();
  * @param {HTMLElement} dom
  */
 export function replay_events(dom) {
+	// custom renderers safe since it immediately returns if not hydrating
 	if (!hydrating) return;
 
-	dom.removeAttribute('onload');
-	dom.removeAttribute('onerror');
+	remove_attribute(dom, 'onload');
+	remove_attribute(dom, 'onerror');
 	// @ts-expect-error
 	const event = dom.__e;
 	if (event !== undefined) {
@@ -41,7 +50,7 @@ export function replay_events(dom) {
 		dom.__e = undefined;
 		queueMicrotask(() => {
 			if (dom.isConnected) {
-				dom.dispatchEvent(event);
+				dispatch_event(dom, event);
 			}
 		});
 	}
@@ -79,10 +88,10 @@ export function create_event(event_name, dom, handler, options = {}) {
 		event_name === 'wheel'
 	) {
 		queue_micro_task(() => {
-			dom.addEventListener(event_name, target_handler, options);
+			add_event_listener(dom, event_name, target_handler, options);
 		});
 	} else {
-		dom.addEventListener(event_name, target_handler, options);
+		add_event_listener(dom, event_name, target_handler, options);
 	}
 
 	return target_handler;
@@ -102,7 +111,7 @@ export function on(element, type, handler, options = {}) {
 	var target_handler = create_event(type, element, handler, options);
 
 	return () => {
-		element.removeEventListener(type, target_handler, options);
+		remove_event_listener(element, type, target_handler, options);
 	};
 }
 
@@ -119,16 +128,18 @@ export function event(event_name, dom, handler, capture, passive) {
 	var target_handler = create_event(event_name, dom, handler, options);
 
 	if (
-		dom === document.body ||
-		// @ts-ignore
-		dom === window ||
-		// @ts-ignore
-		dom === document ||
-		// Firefox has quirky behavior, it can happen that we still get "canplay" events when the element is already removed
-		dom instanceof HTMLMediaElement
+		// if there's a renderer we will never add to body, window or document.
+		renderer == null &&
+		(dom === document.body ||
+			// @ts-ignore
+			dom === window ||
+			// @ts-ignore
+			dom === document ||
+			// Firefox has quirky behavior, it can happen that we still get "canplay" events when the element is already removed
+			dom instanceof HTMLMediaElement)
 	) {
 		teardown(() => {
-			dom.removeEventListener(event_name, target_handler, options);
+			remove_event_listener(dom, event_name, target_handler, options);
 		});
 	}
 }
@@ -171,6 +182,7 @@ let last_propagated_event = null;
  * @returns {void}
  */
 export function handle_event_propagation(event) {
+	// this function is custom renderers safe since it's invoked in `mount`
 	var handler_element = this;
 	var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
 	var event_name = event.type;
@@ -260,7 +272,7 @@ export function handle_event_propagation(event) {
 			/** @type {null | Element} */
 			var parent_element =
 				current_target.assignedSlot ||
-				current_target.parentNode ||
+				get_parent_node(current_target) ||
 				/** @type {any} */ (current_target).host ||
 				null;
 

From 49cff549c70edbdcc05866cd4fb111fa4a4646e0 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 10:34:02 +0200
Subject: [PATCH 14/88] chore: initial test suite

---
 .../svelte/tests/custom-renderers/renderer.js | 256 ++++++++++++++++++
 .../samples/attributes/_config.js             |  25 ++
 .../samples/attributes/main.svelte            |   7 +
 .../samples/basic-element/_config.js          |   5 +
 .../samples/basic-element/main.svelte         |   1 +
 .../samples/conditional-rendering/_config.js  |  24 ++
 .../samples/conditional-rendering/main.svelte |  11 +
 .../samples/each-block/_config.js             |   5 +
 .../samples/each-block/main.svelte            |   9 +
 .../samples/event-handler/_config.js          |  25 ++
 .../samples/event-handler/main.svelte         |  10 +
 .../samples/nested-components/Child.svelte    |   6 +
 .../samples/nested-components/_config.js      |   5 +
 .../samples/nested-components/main.svelte     |   7 +
 .../samples/reactive-state/_config.js         |  18 ++
 .../samples/reactive-state/main.svelte        |   7 +
 .../samples/snippet/_config.js                |   5 +
 .../samples/snippet/main.svelte               |  12 +
 .../samples/text-expression/_config.js        |   5 +
 .../samples/text-expression/main.svelte       |   6 +
 .../svelte/tests/custom-renderers/shared.ts   | 188 +++++++++++++
 .../svelte/tests/custom-renderers/test.ts     |   8 +
 22 files changed, 645 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/renderer.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/attributes/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/attributes/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/basic-element/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/basic-element/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/conditional-rendering/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/each-block/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/each-block/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/event-handler/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/event-handler/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/nested-components/Child.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/nested-components/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/nested-components/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/reactive-state/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/snippet/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/snippet/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/text-expression/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/text-expression/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/shared.ts
 create mode 100644 packages/svelte/tests/custom-renderers/test.ts

diff --git a/packages/svelte/tests/custom-renderers/renderer.js b/packages/svelte/tests/custom-renderers/renderer.js
new file mode 100644
index 0000000000..3b8b207c9a
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/renderer.js
@@ -0,0 +1,256 @@
+/**
+ * An object-based renderer for testing Svelte's custom renderer functionality.
+ *
+ * Runs in plain Node.js — no DOM required. Creates a tree of plain objects
+ * with simple properties (type, name, children, attributes, value, etc).
+ * Proves that Svelte can render into non-DOM targets.
+ */
+
+import { createRenderer } from '../../src/renderer/index.js';
+
+/**
+ * @typedef {{ type: 'element', name: string, attributes: Record<string, string>, children: ObjNode[], listeners: Record<string, Array<{handler: any, options?: any}>>, parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjElement
+ * @typedef {{ type: 'text', value: string, parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjText
+ * @typedef {{ type: 'comment', value: string, parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjComment
+ * @typedef {{ type: 'fragment', children: ObjNode[], parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjFragment
+ * @typedef {ObjElement | ObjText | ObjComment | ObjFragment} ObjNode
+ */
+
+/**
+ * @param {ObjNode & { children?: ObjNode[] }} parent
+ * @param {ObjNode} node
+ * @param {ObjNode | null} anchor
+ */
+function insert_node(parent, node, anchor) {
+	if (node.type === 'fragment') {
+		const children = [...(node.children ?? [])];
+		for (const child of children) {
+			insert_node(parent, child, anchor);
+		}
+		return;
+	}
+
+	// Remove from old parent first
+	if (node.parent) {
+		remove_from_parent(node);
+	}
+
+	const children = /** @type {ObjNode[]} */ (parent.children);
+	node.parent = parent;
+
+	if (anchor === null) {
+		const last = children[children.length - 1] ?? null;
+		if (last) {
+			last.next_sibling = node;
+			node.prev_sibling = last;
+		}
+		node.next_sibling = null;
+		children.push(node);
+	} else {
+		const idx = children.indexOf(anchor);
+		if (idx === -1) throw new Error('Anchor not found in parent');
+
+		const prev = children[idx - 1] ?? null;
+		if (prev) {
+			prev.next_sibling = node;
+			node.prev_sibling = prev;
+		}
+		node.next_sibling = anchor;
+		anchor.prev_sibling = node;
+		children.splice(idx, 0, node);
+	}
+}
+
+/** @param {ObjNode} node */
+function remove_from_parent(node) {
+	const parent = node.parent;
+	if (!parent || !('children' in parent)) return;
+
+	const children = parent.children;
+	const idx = children.indexOf(node);
+	if (idx === -1) return;
+
+	const prev = children[idx - 1] ?? null;
+	const next = children[idx + 1] ?? null;
+	if (prev) prev.next_sibling = next;
+	if (next) next.prev_sibling = prev;
+
+	node.prev_sibling = null;
+	node.next_sibling = null;
+	node.parent = null;
+
+	children.splice(idx, 1);
+}
+
+const renderer = createRenderer({
+	createFragment() {
+		return /** @type {ObjFragment} */ ({
+			type: 'fragment',
+			children: [],
+			parent: null,
+			next_sibling: null,
+			prev_sibling: null
+		});
+	},
+
+	createElement(name) {
+		return /** @type {ObjElement} */ ({
+			type: 'element',
+			name,
+			attributes: {},
+			children: [],
+			listeners: {},
+			parent: null,
+			next_sibling: null,
+			prev_sibling: null
+		});
+	},
+
+	createTextNode(data) {
+		return /** @type {ObjText} */ ({
+			type: 'text',
+			value: data,
+			parent: null,
+			next_sibling: null,
+			prev_sibling: null
+		});
+	},
+
+	createComment(data) {
+		return /** @type {ObjComment} */ ({
+			type: 'comment',
+			value: data,
+			parent: null,
+			next_sibling: null,
+			prev_sibling: null
+		});
+	},
+
+	nodeType(node) {
+		return node.type;
+	},
+
+	getNodeValue(node) {
+		if (node.type === 'text' || node.type === 'comment') return node.value;
+		return null;
+	},
+
+	getAttribute(element, name) {
+		return element.attributes?.[name] ?? null;
+	},
+
+	setAttribute(element, key, value) {
+		element.attributes[key] = String(value);
+	},
+
+	removeAttribute(element, name) {
+		delete element.attributes[name];
+	},
+
+	hasAttribute(element, name) {
+		return name in (element.attributes ?? {});
+	},
+
+	setText(node, text) {
+		if (node.type === 'text' || node.type === 'comment') {
+			node.value = text;
+		}
+	},
+
+	getFirstChild(element) {
+		return element.children?.[0] ?? null;
+	},
+
+	getLastChild(element) {
+		const c = element.children;
+		return c?.[c.length - 1] ?? null;
+	},
+
+	getNextSibling(node) {
+		return node.next_sibling ?? null;
+	},
+
+	insert(parent, element, anchor) {
+		insert_node(parent, element, anchor);
+	},
+
+	remove(node) {
+		remove_from_parent(node);
+	},
+
+	getParent(node) {
+		return node.parent ?? null;
+	},
+
+	addEventListener(target, type, handler, options) {
+		if (target.type !== 'element') return;
+		if (!target.listeners) target.listeners = {};
+		if (!target.listeners[type]) target.listeners[type] = [];
+		target.listeners[type].push({ handler, options });
+	},
+
+	removeEventListener(target, type, handler, options) {
+		if (target.type !== 'element') return;
+		if (!target.listeners?.[type]) return;
+		target.listeners[type] = target.listeners[type].filter(
+			(/** @type {any} */ l) => l.handler !== handler
+		);
+	}
+});
+
+// ---- Test helpers ----
+
+/**
+ * Create a root object for mounting components into.
+ * @returns {ObjElement}
+ */
+export function create_root() {
+	return renderer.createElement('root');
+}
+
+/**
+ * Dispatch a synthetic event on an object node.
+ * @param {any} node
+ * @param {string} type
+ * @param {any} [detail]
+ */
+export function dispatch_event(node, type, detail) {
+	const listeners = node.listeners?.[type];
+	if (!listeners) return;
+	const event = { type, detail, target: node };
+	for (const { handler } of listeners) {
+		handler(event);
+	}
+}
+
+/**
+ * Serialize an object tree to an HTML-like string for easy assertion.
+ * @param {ObjNode} node
+ * @returns {string}
+ */
+export function serialize(node) {
+	if (!node) return '';
+
+	switch (node.type) {
+		case 'text':
+			return node.value ?? '';
+		case 'comment':
+			return '';
+		case 'fragment':
+			return node.children.map(serialize).join('');
+		case 'element': {
+			const tag = node.name;
+			let attrs = '';
+			const sorted_keys = Object.keys(node.attributes).sort();
+			for (const key of sorted_keys) {
+				attrs += ` ${key}="${node.attributes[key]}"`;
+			}
+			const children = node.children.map(serialize).join('');
+			return `<${tag}${attrs}>${children}</${tag}>`;
+		}
+		default:
+			return '';
+	}
+}
+
+export default renderer;
diff --git a/packages/svelte/tests/custom-renderers/samples/attributes/_config.js b/packages/svelte/tests/custom-renderers/samples/attributes/_config.js
new file mode 100644
index 0000000000..318378d0d8
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/attributes/_config.js
@@ -0,0 +1,25 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, serialize }) {
+		const html = serialize(target);
+		assert.equal(
+			html,
+			'<root><div class="container" data-color="red"><span id="label">colored</span></div></root>'
+		);
+
+		// Verify individual attribute access on the object node
+		const div = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'div'
+		);
+		assert.ok(div);
+		assert.equal(div.attributes['class'], 'container');
+		assert.equal(div.attributes['data-color'], 'red');
+
+		const span = div.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'span'
+		);
+		assert.ok(span);
+		assert.equal(span.attributes['id'], 'label');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/attributes/main.svelte b/packages/svelte/tests/custom-renderers/samples/attributes/main.svelte
new file mode 100644
index 0000000000..4f9a55c096
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/attributes/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let color = $state('red');
+</script>
+
+<div class="container" data-color={color}>
+	<span id="label">colored</span>
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples/basic-element/_config.js b/packages/svelte/tests/custom-renderers/samples/basic-element/_config.js
new file mode 100644
index 0000000000..8de48d5f2d
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/basic-element/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<p>hello</p>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/basic-element/main.svelte b/packages/svelte/tests/custom-renderers/samples/basic-element/main.svelte
new file mode 100644
index 0000000000..302a01f335
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/basic-element/main.svelte
@@ -0,0 +1 @@
+<p>hello</p>
diff --git a/packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js b/packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js
new file mode 100644
index 0000000000..9538a019c3
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<p>visible</p> <button>toggle</button>',
+	test({ assert, target, serialize, dispatch_event }) {
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		dispatch_event(button, 'click');
+		flushSync();
+
+		let html = serialize(target);
+		assert.equal(html, '<root><p>hidden</p> <button>toggle</button></root>');
+
+		dispatch_event(button, 'click');
+		flushSync();
+
+		html = serialize(target);
+		assert.equal(html, '<root><p>visible</p> <button>toggle</button></root>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/conditional-rendering/main.svelte b/packages/svelte/tests/custom-renderers/samples/conditional-rendering/main.svelte
new file mode 100644
index 0000000000..86e5dd8577
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/conditional-rendering/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let visible = $state(true);
+</script>
+
+{#if visible}
+	<p>visible</p>
+{:else}
+	<p>hidden</p>
+{/if}
+
+<button onclick={() => visible = !visible}>toggle</button>
diff --git a/packages/svelte/tests/custom-renderers/samples/each-block/_config.js b/packages/svelte/tests/custom-renderers/samples/each-block/_config.js
new file mode 100644
index 0000000000..05e41069c8
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/each-block/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<ul><li>a</li><li>b</li><li>c</li></ul>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/each-block/main.svelte b/packages/svelte/tests/custom-renderers/samples/each-block/main.svelte
new file mode 100644
index 0000000000..6b93690b55
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/each-block/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let items = $state(['a', 'b', 'c']);
+</script>
+
+<ul>
+	{#each items as item}
+		<li>{item}</li>
+	{/each}
+</ul>
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler/_config.js b/packages/svelte/tests/custom-renderers/samples/event-handler/_config.js
new file mode 100644
index 0000000000..013a983464
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler/_config.js
@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>click me</button> <p>0</p>',
+	test({ assert, target, serialize, dispatch_event }) {
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		dispatch_event(button, 'click');
+		flushSync();
+
+		const html = serialize(target);
+		assert.equal(html, '<root><button>click me</button> <p>1</p></root>');
+
+		dispatch_event(button, 'click');
+		dispatch_event(button, 'click');
+		flushSync();
+
+		const html2 = serialize(target);
+		assert.equal(html2, '<root><button>click me</button> <p>3</p></root>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler/main.svelte b/packages/svelte/tests/custom-renderers/samples/event-handler/main.svelte
new file mode 100644
index 0000000000..1df8f7f799
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let count = $state(0);
+
+	function increment() {
+		count++;
+	}
+</script>
+
+<button onclick={increment}>click me</button>
+<p>{count}</p>
diff --git a/packages/svelte/tests/custom-renderers/samples/nested-components/Child.svelte b/packages/svelte/tests/custom-renderers/samples/nested-components/Child.svelte
new file mode 100644
index 0000000000..7253d3efb2
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/nested-components/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	/** @type {{ message: string }} */
+	let { message } = $props();
+</script>
+
+<span>{message}</span>
diff --git a/packages/svelte/tests/custom-renderers/samples/nested-components/_config.js b/packages/svelte/tests/custom-renderers/samples/nested-components/_config.js
new file mode 100644
index 0000000000..49d4f450ec
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/nested-components/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div><span>hello from child</span></div>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/nested-components/main.svelte b/packages/svelte/tests/custom-renderers/samples/nested-components/main.svelte
new file mode 100644
index 0000000000..c48bc7dac7
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/nested-components/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<div>
+	<Child message="hello from child" />
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js b/packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js
new file mode 100644
index 0000000000..82a8a02a64
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>clicks: 0</button>',
+	test({ assert, target, serialize, dispatch_event }) {
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		dispatch_event(button, 'click');
+		flushSync();
+
+		const html = serialize(target);
+		assert.equal(html, '<root><button>clicks: 1</button></root>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/reactive-state/main.svelte b/packages/svelte/tests/custom-renderers/samples/reactive-state/main.svelte
new file mode 100644
index 0000000000..ce9ad28ec5
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/reactive-state/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+	clicks: {count}
+</button>
diff --git a/packages/svelte/tests/custom-renderers/samples/snippet/_config.js b/packages/svelte/tests/custom-renderers/samples/snippet/_config.js
new file mode 100644
index 0000000000..fd2a9d2db5
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/snippet/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div><span>hello default</span></div>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/snippet/main.svelte b/packages/svelte/tests/custom-renderers/samples/snippet/main.svelte
new file mode 100644
index 0000000000..46e069c215
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/snippet/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	/** @type {{ label?: string }} */
+	let { label = 'default' } = $props();
+</script>
+
+{#snippet greeting(name)}
+	<span>hello {name}</span>
+{/snippet}
+
+<div>
+	{@render greeting(label)}
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples/text-expression/_config.js b/packages/svelte/tests/custom-renderers/samples/text-expression/_config.js
new file mode 100644
index 0000000000..68e35f6a66
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/text-expression/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<p>hello world</p>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/text-expression/main.svelte b/packages/svelte/tests/custom-renderers/samples/text-expression/main.svelte
new file mode 100644
index 0000000000..afca058e70
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/text-expression/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	/** @type {{ name?: string }} */
+	let { name = 'world' } = $props();
+</script>
+
+<p>hello {name}</p>
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
new file mode 100644
index 0000000000..fa7e1fb0e9
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -0,0 +1,188 @@
+import * as path from 'node:path';
+import { setImmediate } from 'node:timers/promises';
+import { assert } from 'vitest';
+import { compile_directory } from '../helpers.js';
+import { suite_with_variants, type BaseTest } from '../suite.js';
+import type { CompileOptions } from '#compiler';
+import renderer, { create_root, serialize, dispatch_event } from './renderer.js';
+
+export interface CustomRendererTest extends BaseTest {
+	html?: string;
+	compileOptions?: Partial<CompileOptions>;
+	props?: Record<string, any>;
+	error?: string;
+	runtime_error?: string;
+	warnings?: string[];
+	test?: (args: {
+		assert: typeof import('vitest').assert;
+		target: any;
+		component: Record<string, any>;
+		mod: any;
+		logs: any[];
+		warnings: any[];
+		renderer: typeof renderer;
+		serialize: typeof serialize;
+		dispatch_event: typeof dispatch_event;
+	}) => void | Promise<void>;
+}
+
+// eslint-disable-next-line no-console
+const console_log = console.log;
+// eslint-disable-next-line no-console
+const console_warn = console.warn;
+
+const renderer_path = path.resolve(import.meta.dirname, 'renderer.js');
+
+export function custom_renderer_suite() {
+	return suite_with_variants<CustomRendererTest, 'custom-renderer', CompileOptions>(
+		['custom-renderer'],
+		(_variant, _config) => {
+			return false;
+		},
+		(config, cwd) => {
+			return common_setup(cwd, config);
+		},
+		async (config, cwd, _variant, common) => {
+			await run_test(cwd, config, common);
+		}
+	);
+}
+
+async function common_setup(cwd: string, config: CustomRendererTest) {
+	const compile_options: CompileOptions = {
+		generate: 'client',
+		rootDir: cwd,
+		runes: true,
+		customRenderer: renderer_path,
+		...config.compileOptions
+	};
+
+	await compile_directory(cwd, 'client', compile_options);
+
+	return compile_options;
+}
+
+async function run_test(cwd: string, config: CustomRendererTest, compile_options: CompileOptions) {
+	let unintended_error = false;
+	let logs: any[] = [];
+	let warnings: any[] = [];
+
+	{
+		const str = config.test?.toString() ?? '';
+		let n = 0;
+		let i = 0;
+		while (i < str.length) {
+			if (str[i] === '(') n++;
+			if (str[i] === ')' && --n === 0) break;
+			i++;
+		}
+
+		if (str.slice(0, i).includes('logs')) {
+			// eslint-disable-next-line no-console
+			console.log = (...args) => {
+				logs.push(...args);
+			};
+		}
+
+		if (str.slice(0, i).includes('warnings') || config.warnings) {
+			// eslint-disable-next-line no-console
+			console.warn = (...args) => {
+				if (typeof args[0] === 'string' && args[0].startsWith('%c[svelte]')) {
+					let message = args[0];
+					message = message.slice(message.indexOf('%c', 2) + 2);
+					const lines = message.split('\n');
+					if (lines.at(-1)?.startsWith('https://svelte.dev/e/')) {
+						lines.pop();
+					}
+					message = lines.join('\n');
+					warnings.push(message);
+				} else {
+					warnings.push(...args);
+				}
+			};
+		}
+	}
+
+	try {
+		const mod = await import(`${cwd}/_output/client/main.svelte.js`);
+		const target = create_root();
+
+		let unmount: (() => void) | undefined;
+
+		try {
+			unmount = renderer.render(mod.default, {
+				target,
+				props: config.props ?? {}
+			});
+		} catch (err) {
+			if (config.error) {
+				assert.include((err as Error).message, config.error);
+				return;
+			}
+			throw err;
+		}
+
+		if (config.error) {
+			unintended_error = true;
+			assert.fail('Expected a runtime error');
+		}
+
+		if (config.html) {
+			const html = serialize(target);
+			assert.equal(html, `<root>${config.html}</root>`);
+		}
+
+		try {
+			if (config.test) {
+				await config.test({
+					assert,
+					target,
+					component: config.props ?? {},
+					mod,
+					logs,
+					warnings,
+					renderer: renderer,
+					serialize,
+					dispatch_event
+				});
+			}
+
+			if (config.runtime_error) {
+				unintended_error = true;
+				assert.fail('Expected a runtime error');
+			}
+		} finally {
+			unmount?.();
+
+			if (config.warnings) {
+				assert.deepEqual(warnings, config.warnings);
+			}
+
+			// After unmount the target should be empty (only comments remain, which serialize to '')
+			const remaining = serialize(target);
+			assert.equal(
+				remaining,
+				'<root></root>',
+				'Expected component to leave nothing behind after unmount'
+			);
+		}
+	} catch (err) {
+		if (config.runtime_error) {
+			assert.include((err as Error).message, config.runtime_error);
+		} else if (config.error && !unintended_error) {
+			assert.include((err as Error).message, config.error);
+		} else {
+			throw err;
+		}
+	} finally {
+		await setImmediate();
+		console.log = console_log;
+		console.warn = console_warn;
+	}
+}
+
+export function ok(value: any): asserts value {
+	if (!value) {
+		throw new Error(`Expected truthy value, got ${value}`);
+	}
+}
diff --git a/packages/svelte/tests/custom-renderers/test.ts b/packages/svelte/tests/custom-renderers/test.ts
new file mode 100644
index 0000000000..f29cb0e322
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/test.ts
@@ -0,0 +1,8 @@
+// @vitest-environment node
+import { custom_renderer_suite, ok } from './shared';
+
+const { test, run } = custom_renderer_suite();
+
+export { test, ok };
+
+await run(__dirname);

From ecffd81c22ab429c498ee42cb3db209990559945 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 10:34:43 +0200
Subject: [PATCH 15/88] fix: types

---
 .../internal/client/custom-renderer/index.js    | 17 ++++++++---------
 packages/svelte/types/index.d.ts                | 10 +++++-----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index 0cf751a73c..d511d9a98e 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -20,22 +20,21 @@ import { push_renderer } from './state.js';
  * @property {(element: TElement, name: string)=>void} removeAttribute - Remove the attribute with the given name from the element
  * @property {(element: TElement, name: string)=>boolean} hasAttribute - Return true if the element has an attribute with the given name
  * @property {(node: TNode, text: string)=>void} setText - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
- * @property {(element: TElement | TFragment)=>TNode} getFirstChild - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
- * @property {(element: TElement | TFragment)=>TNode} getLastChild - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
- * @property {(element: TNode)=>TNode} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
+ * @property {(element: TElement | TFragment)=>TNode | null} getFirstChild - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
+ * @property {(element: TElement | TFragment)=>TNode | null} getLastChild - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
+ * @property {(element: TNode)=>TNode | null} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
  * @property {(parent: TElement | TFragment, element: TNode, anchor: TNode | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents
  * @property {(node: TNode)=>void} remove - Remove the node from the tree
- * @property {(element: TNode)=>TNode} getParent - Return the parent of the element, or null if it has no parent
- * @property {(node: TNode, deep: boolean)=>TNode} cloneNode - Return a clone of the node. If deep is true, all of the node's children should also be cloned
+ * @property {(element: TNode)=>TNode | null} getParent - Return the parent of the element, or null if it has no parent
  * @property {(target: TNode, type: string, handler: any, options?: any)=>void} addEventListener - Add an event listener of the given type and handler to the target node, with optional options
  * @property {(target: TNode, type: string, handler: any, options?: any)=>void} removeEventListener - Remove an event listener of the given type and handler from the target node, with optional options
  */
 
 /**
- * @template [const TFragment=unknown]
- * @template [const TElement=unknown]
- * @template [const TTextNode=unknown]
- * @template [const TComment=unknown]
+ * @template [TFragment=unknown]
+ * @template [TElement=unknown]
+ * @template [TTextNode=unknown]
+ * @template [TComment=unknown]
  * @param {Renderer<TFragment, TElement, TTextNode, TComment>} renderer
  * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TFragment | TElement | TTextNode | TComment, props?: any }) => () => void }}
  */
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index a3a02eddd3..cc17fe9ffb 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2568,7 +2568,7 @@ declare module 'svelte/reactivity/window' {
 }
 
 declare module 'svelte/renderer' {
-	export function createRenderer<const TFragment = unknown, const TElement = unknown, const TTextNode = unknown, const TComment = unknown>(renderer: Renderer<TFragment, TElement, TTextNode, TComment>): Renderer<TFragment, TElement, TTextNode, TComment> & {
+	export function createRenderer<TFragment = unknown, TElement = unknown, TTextNode = unknown, TComment = unknown>(renderer: Renderer<TFragment, TElement, TTextNode, TComment>): Renderer<TFragment, TElement, TTextNode, TComment> & {
 		render: (Component: any, options: {
 			target: TFragment | TElement | TTextNode | TComment;
 			props?: any;
@@ -2622,15 +2622,15 @@ declare module 'svelte/renderer' {
 		/**
 		 * - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
 		 */
-		getFirstChild: (element: TElement | TFragment) => TNode;
+		getFirstChild: (element: TElement | TFragment) => TNode | null;
 		/**
 		 * - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
 		 */
-		getLastChild: (element: TElement | TFragment) => TNode;
+		getLastChild: (element: TElement | TFragment) => TNode | null;
 		/**
 		 * - Return the next sibling of the node, or null if it has no next sibling
 		 */
-		getNextSibling: (element: TNode) => TNode;
+		getNextSibling: (element: TNode) => TNode | null;
 		/**
 		 * - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents
 		 */
@@ -2642,7 +2642,7 @@ declare module 'svelte/renderer' {
 		/**
 		 * - Return the parent of the element, or null if it has no parent
 		 */
-		getParent: (element: TNode) => TNode;
+		getParent: (element: TNode) => TNode | null;
 		/**
 		 * - Add an event listener of the given type and handler to the target node, with optional options
 		 */

From e86da84c799d3c6d37dcabc513612015dff55e4b Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 11:24:52 +0200
Subject: [PATCH 16/88] fix: handle compiled `nodeValue`/`textContent`

---
 .../client/visitors/RegularElement.js         | 22 ++++++++++++++++---
 .../client/visitors/shared/fragment.js        |  7 +++++-
 .../_config.js                                |  5 +++++
 .../main.svelte                               |  5 +++++
 .../text-expression-standalone/_config.js     |  5 +++++
 .../text-expression-standalone/main.svelte    |  5 +++++
 6 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/text-expression-standalone/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/text-expression-standalone/main.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index ec74c3ed27..0746c5f867 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -346,9 +346,25 @@ export function RegularElement(node, context) {
 		const empty_string = value.type === 'Literal' && value.value === '';
 
 		if (!empty_string) {
-			child_state.init.push(
-				b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
-			);
+			if (context.state.options.customRenderer) {
+				// custom renderers need to use the method to invoke the renderer
+				context.state.template.push_text([
+					{
+						type: 'Text',
+						data: '',
+						raw: '',
+						start: -1,
+						end: -1
+					}
+				]);
+				const text = context.state.scope.generate('text');
+				context.state.init.push(b.var(text, b.call('$.child', node_id)));
+				context.state.init.push(b.stmt(b.call('$.set_text', b.id(text), value)));
+			} else {
+				child_state.init.push(
+					b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
+				);
+			}
 		}
 	} else if (is_customizable_select_element(node)) {
 		// For <option>, <optgroup>, or <select> elements with rich content, we need to branch based on browser support.
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index f77af74f7e..d245665d78 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -83,7 +83,12 @@ export function process_children(nodes, initial, is_element, context) {
 		if (has_state && !within_bound_contenteditable) {
 			context.state.update.push(update);
 		} else {
-			context.state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
+			if (context.state.options.customRenderer) {
+				// custom renderers need to use the method to invoke the renderer
+				context.state.init.push(update);
+			} else {
+				context.state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
+			}
 		}
 	}
 
diff --git a/packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/_config.js b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/_config.js
new file mode 100644
index 0000000000..68e35f6a66
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<p>hello world</p>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/main.svelte b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/main.svelte
new file mode 100644
index 0000000000..2d4188f2de
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone-element/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = $state("world");
+</script>
+
+<p>hello {name}</p>
diff --git a/packages/svelte/tests/custom-renderers/samples/text-expression-standalone/_config.js b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone/_config.js
new file mode 100644
index 0000000000..b5933e4424
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'hello world'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/text-expression-standalone/main.svelte b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone/main.svelte
new file mode 100644
index 0000000000..bc43d58894
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/text-expression-standalone/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = $state("world");
+</script>
+
+hello {name}

From f828ea3c6aa8479e80b3d98b12f65df60c534fa3 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 12:26:04 +0200
Subject: [PATCH 17/88] chore: better test renderer

---
 .../svelte/tests/custom-renderers/renderer.js | 50 +++++--------------
 1 file changed, 12 insertions(+), 38 deletions(-)

diff --git a/packages/svelte/tests/custom-renderers/renderer.js b/packages/svelte/tests/custom-renderers/renderer.js
index 3b8b207c9a..6141242ded 100644
--- a/packages/svelte/tests/custom-renderers/renderer.js
+++ b/packages/svelte/tests/custom-renderers/renderer.js
@@ -9,10 +9,10 @@
 import { createRenderer } from '../../src/renderer/index.js';
 
 /**
- * @typedef {{ type: 'element', name: string, attributes: Record<string, string>, children: ObjNode[], listeners: Record<string, Array<{handler: any, options?: any}>>, parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjElement
- * @typedef {{ type: 'text', value: string, parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjText
- * @typedef {{ type: 'comment', value: string, parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjComment
- * @typedef {{ type: 'fragment', children: ObjNode[], parent: ObjNode | null, next_sibling: ObjNode | null, prev_sibling: ObjNode | null }} ObjFragment
+ * @typedef {{ type: 'element', name: string, attributes: Record<string, string>, children: ObjNode[], listeners: Record<string, Array<{handler: any, options?: any}>>, parent: ObjNode | null }} ObjElement
+ * @typedef {{ type: 'text', value: string, parent: ObjNode | null }} ObjText
+ * @typedef {{ type: 'comment', value: string, parent: ObjNode | null }} ObjComment
+ * @typedef {{ type: 'fragment', children: ObjNode[], parent: ObjNode | null }} ObjFragment
  * @typedef {ObjElement | ObjText | ObjComment | ObjFragment} ObjNode
  */
 
@@ -39,24 +39,10 @@ function insert_node(parent, node, anchor) {
 	node.parent = parent;
 
 	if (anchor === null) {
-		const last = children[children.length - 1] ?? null;
-		if (last) {
-			last.next_sibling = node;
-			node.prev_sibling = last;
-		}
-		node.next_sibling = null;
 		children.push(node);
 	} else {
 		const idx = children.indexOf(anchor);
 		if (idx === -1) throw new Error('Anchor not found in parent');
-
-		const prev = children[idx - 1] ?? null;
-		if (prev) {
-			prev.next_sibling = node;
-			node.prev_sibling = prev;
-		}
-		node.next_sibling = anchor;
-		anchor.prev_sibling = node;
 		children.splice(idx, 0, node);
 	}
 }
@@ -70,13 +56,6 @@ function remove_from_parent(node) {
 	const idx = children.indexOf(node);
 	if (idx === -1) return;
 
-	const prev = children[idx - 1] ?? null;
-	const next = children[idx + 1] ?? null;
-	if (prev) prev.next_sibling = next;
-	if (next) next.prev_sibling = prev;
-
-	node.prev_sibling = null;
-	node.next_sibling = null;
 	node.parent = null;
 
 	children.splice(idx, 1);
@@ -87,9 +66,7 @@ const renderer = createRenderer({
 		return /** @type {ObjFragment} */ ({
 			type: 'fragment',
 			children: [],
-			parent: null,
-			next_sibling: null,
-			prev_sibling: null
+			parent: null
 		});
 	},
 
@@ -100,9 +77,7 @@ const renderer = createRenderer({
 			attributes: {},
 			children: [],
 			listeners: {},
-			parent: null,
-			next_sibling: null,
-			prev_sibling: null
+			parent: null
 		});
 	},
 
@@ -110,9 +85,7 @@ const renderer = createRenderer({
 		return /** @type {ObjText} */ ({
 			type: 'text',
 			value: data,
-			parent: null,
-			next_sibling: null,
-			prev_sibling: null
+			parent: null
 		});
 	},
 
@@ -120,9 +93,7 @@ const renderer = createRenderer({
 		return /** @type {ObjComment} */ ({
 			type: 'comment',
 			value: data,
-			parent: null,
-			next_sibling: null,
-			prev_sibling: null
+			parent: null
 		});
 	},
 
@@ -167,7 +138,10 @@ const renderer = createRenderer({
 	},
 
 	getNextSibling(node) {
-		return node.next_sibling ?? null;
+		const parent = node.parent;
+		if (!parent || !('children' in parent)) return null;
+		const idx = parent.children.indexOf(node);
+		return parent.children[idx + 1] ?? null;
 	},
 
 	insert(parent, element, anchor) {

From 0f447331839665b552d106fa83249992fd721880 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 12:26:19 +0200
Subject: [PATCH 18/88] chore: boundary test

---
 .../samples/boundary-pending/Inner.svelte     |  6 ++++
 .../samples/boundary-pending/_config.js       | 33 +++++++++++++++++++
 .../samples/boundary-pending/main.svelte      | 14 ++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/boundary-pending/Inner.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/boundary-pending/main.svelte

diff --git a/packages/svelte/tests/custom-renderers/samples/boundary-pending/Inner.svelte b/packages/svelte/tests/custom-renderers/samples/boundary-pending/Inner.svelte
new file mode 100644
index 0000000000..a05bc7dd5a
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/boundary-pending/Inner.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { promise } = $props();
+	let value = $derived(await promise);
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js b/packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js
new file mode 100644
index 0000000000..cd30fba5f2
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js
@@ -0,0 +1,33 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+/** @type {(value: string) => void} */
+let resolve;
+
+const promise = new Promise((r) => {
+	resolve = r;
+});
+
+export default test({
+	props: { promise },
+	compileOptions: {
+		experimental: {
+			async: true
+		}
+	},
+	html: '<p>loading...</p> <p>Something outside</p>',
+	async test({ assert, target, serialize }) {
+		resolve('hello');
+
+		// wait enough microtasks for the async chain to fully resolve:
+		// promise.then(() => Promise.resolve()).finally(() => decrement_pending())
+		await new Promise((r) => setTimeout(r, 0));
+		flushSync();
+
+		const html = serialize(target);
+		assert.equal(
+			html,
+			'<root><p>hello</p> <p>Something inside</p> <p>Something outside</p></root>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/boundary-pending/main.svelte b/packages/svelte/tests/custom-renderers/samples/boundary-pending/main.svelte
new file mode 100644
index 0000000000..c64bf160e5
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/boundary-pending/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Inner from './Inner.svelte';
+	let { promise } = $props();
+</script>
+
+<svelte:boundary>
+	<Inner {promise} />
+	<p>Something inside</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+<p>Something outside</p>

From beddf45690b1551b422a6ff53a0d86a7763f1fcb Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 12:30:56 +0200
Subject: [PATCH 19/88] chore: render into a fragment in tests

---
 packages/svelte/tests/custom-renderers/renderer.js        | 4 ++--
 .../tests/custom-renderers/samples/attributes/_config.js  | 2 +-
 .../custom-renderers/samples/boundary-pending/_config.js  | 5 +----
 .../samples/conditional-rendering/_config.js              | 4 ++--
 .../custom-renderers/samples/event-handler/_config.js     | 4 ++--
 .../custom-renderers/samples/reactive-state/_config.js    | 2 +-
 packages/svelte/tests/custom-renderers/shared.ts          | 8 ++------
 7 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/svelte/tests/custom-renderers/renderer.js b/packages/svelte/tests/custom-renderers/renderer.js
index 6141242ded..cec57ccc53 100644
--- a/packages/svelte/tests/custom-renderers/renderer.js
+++ b/packages/svelte/tests/custom-renderers/renderer.js
@@ -176,10 +176,10 @@ const renderer = createRenderer({
 
 /**
  * Create a root object for mounting components into.
- * @returns {ObjElement}
+ * @returns {ObjFragment}
  */
 export function create_root() {
-	return renderer.createElement('root');
+	return renderer.createFragment();
 }
 
 /**
diff --git a/packages/svelte/tests/custom-renderers/samples/attributes/_config.js b/packages/svelte/tests/custom-renderers/samples/attributes/_config.js
index 318378d0d8..448b8adc26 100644
--- a/packages/svelte/tests/custom-renderers/samples/attributes/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/attributes/_config.js
@@ -5,7 +5,7 @@ export default test({
 		const html = serialize(target);
 		assert.equal(
 			html,
-			'<root><div class="container" data-color="red"><span id="label">colored</span></div></root>'
+			'<div class="container" data-color="red"><span id="label">colored</span></div>'
 		);
 
 		// Verify individual attribute access on the object node
diff --git a/packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js b/packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js
index cd30fba5f2..ad126e3e0d 100644
--- a/packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/boundary-pending/_config.js
@@ -25,9 +25,6 @@ export default test({
 		flushSync();
 
 		const html = serialize(target);
-		assert.equal(
-			html,
-			'<root><p>hello</p> <p>Something inside</p> <p>Something outside</p></root>'
-		);
+		assert.equal(html, '<p>hello</p> <p>Something inside</p> <p>Something outside</p>');
 	}
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js b/packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js
index 9538a019c3..61f68fa1ca 100644
--- a/packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/conditional-rendering/_config.js
@@ -13,12 +13,12 @@ export default test({
 		flushSync();
 
 		let html = serialize(target);
-		assert.equal(html, '<root><p>hidden</p> <button>toggle</button></root>');
+		assert.equal(html, '<p>hidden</p> <button>toggle</button>');
 
 		dispatch_event(button, 'click');
 		flushSync();
 
 		html = serialize(target);
-		assert.equal(html, '<root><p>visible</p> <button>toggle</button></root>');
+		assert.equal(html, '<p>visible</p> <button>toggle</button>');
 	}
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler/_config.js b/packages/svelte/tests/custom-renderers/samples/event-handler/_config.js
index 013a983464..bae32a7474 100644
--- a/packages/svelte/tests/custom-renderers/samples/event-handler/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler/_config.js
@@ -13,13 +13,13 @@ export default test({
 		flushSync();
 
 		const html = serialize(target);
-		assert.equal(html, '<root><button>click me</button> <p>1</p></root>');
+		assert.equal(html, '<button>click me</button> <p>1</p>');
 
 		dispatch_event(button, 'click');
 		dispatch_event(button, 'click');
 		flushSync();
 
 		const html2 = serialize(target);
-		assert.equal(html2, '<root><button>click me</button> <p>3</p></root>');
+		assert.equal(html2, '<button>click me</button> <p>3</p>');
 	}
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js b/packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js
index 82a8a02a64..dffe3ba56d 100644
--- a/packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/reactive-state/_config.js
@@ -13,6 +13,6 @@ export default test({
 		flushSync();
 
 		const html = serialize(target);
-		assert.equal(html, '<root><button>clicks: 1</button></root>');
+		assert.equal(html, '<button>clicks: 1</button>');
 	}
 });
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index fa7e1fb0e9..7f98895863 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -129,7 +129,7 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 
 		if (config.html) {
 			const html = serialize(target);
-			assert.equal(html, `<root>${config.html}</root>`);
+			assert.equal(html, config.html);
 		}
 
 		try {
@@ -160,11 +160,7 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 
 			// After unmount the target should be empty (only comments remain, which serialize to '')
 			const remaining = serialize(target);
-			assert.equal(
-				remaining,
-				'<root></root>',
-				'Expected component to leave nothing behind after unmount'
-			);
+			assert.equal(remaining, '', 'Expected component to leave nothing behind after unmount');
 		}
 	} catch (err) {
 		if (config.runtime_error) {

From 7dca98564ac884cf94647e12fdbc9f690f06fd35 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 12:38:49 +0200
Subject: [PATCH 20/88] chore: add each reactive and key tests

---
 .../samples/each-block-reactive/_config.js    | 21 +++++++++++++++++++
 .../samples/each-block-reactive/main.svelte   | 11 ++++++++++
 .../samples/key-block/_config.js              | 18 ++++++++++++++++
 .../samples/key-block/main.svelte             | 10 +++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/each-block-reactive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/each-block-reactive/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/key-block/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/key-block/main.svelte

diff --git a/packages/svelte/tests/custom-renderers/samples/each-block-reactive/_config.js b/packages/svelte/tests/custom-renderers/samples/each-block-reactive/_config.js
new file mode 100644
index 0000000000..3505398608
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/each-block-reactive/_config.js
@@ -0,0 +1,21 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>add item</button> <ul><li>a</li><li>b</li><li>c</li></ul>',
+	test({ assert, target, serialize, dispatch_event }) {
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		dispatch_event(button, 'click');
+		flushSync();
+
+		const html = serialize(target);
+		assert.equal(
+			html,
+			'<button>add item</button> <ul><li>a</li><li>b</li><li>c</li><li>d</li></ul>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/each-block-reactive/main.svelte b/packages/svelte/tests/custom-renderers/samples/each-block-reactive/main.svelte
new file mode 100644
index 0000000000..a37f562826
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/each-block-reactive/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let items = $state(['a', 'b', 'c']);
+</script>
+
+<button onclick={() => items.push('d')}>add item</button>
+
+<ul>
+	{#each items as item}
+		<li>{item}</li>
+	{/each}
+</ul>
diff --git a/packages/svelte/tests/custom-renderers/samples/key-block/_config.js b/packages/svelte/tests/custom-renderers/samples/key-block/_config.js
new file mode 100644
index 0000000000..ea1071ca9d
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/key-block/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button></button> <p>1</p>',
+	test({ assert, target, serialize, dispatch_event }) {
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		dispatch_event(button, 'click');
+		flushSync();
+
+		const html = serialize(target);
+		assert.equal(html, '<button></button> <p>2</p>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/key-block/main.svelte b/packages/svelte/tests/custom-renderers/samples/key-block/main.svelte
new file mode 100644
index 0000000000..7da660f268
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/key-block/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let key = $state(0);
+	let not_state = 0;
+</script>
+
+<button onclick={() => key++}></button>
+
+{#key key}
+	<p>{++not_state}</p>
+{/key}
\ No newline at end of file

From 37bd61d3f168fbf4fc1dd691624f9ac3b0e4c8ea Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 16:09:12 +0200
Subject: [PATCH 21/88] fix: attributes dom access

---
 .../client/visitors/RegularElement.js         |  20 +++-
 .../client/dom/elements/attributes.js         | 103 +++++++++++-------
 .../src/internal/client/dom/operations.js     |  74 +++++++++++++
 .../value-checked-attributes/_config.js       |  65 +++++++++++
 .../value-checked-attributes/main.svelte      |  20 ++++
 5 files changed, 237 insertions(+), 45 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/value-checked-attributes/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/value-checked-attributes/main.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 0746c5f867..f5f574f328 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -270,7 +270,14 @@ export function RegularElement(node, context) {
 					(value, metadata) => context.state.memoizer.add(value, metadata)
 				);
 
-				const update = build_element_attribute_update(node, node_id, name, value, attributes);
+				const update = build_element_attribute_update(
+					node,
+					node_id,
+					name,
+					value,
+					attributes,
+					!!context.state.options.customRenderer
+				);
 
 				(has_state ? context.state.update : context.state.init).push(b.stmt(update));
 			}
@@ -597,7 +604,14 @@ export function build_style_directives_object(
  * @param {Expression} value
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
  */
-function build_element_attribute_update(element, node_id, name, value, attributes) {
+function build_element_attribute_update(
+	element,
+	node_id,
+	name,
+	value,
+	attributes,
+	custom_renderer = false
+) {
 	if (name === 'muted') {
 		// Special case for Firefox who needs it set as a property in order to work
 		return b.assignment('=', b.member(node_id, b.id('muted')), value);
@@ -644,7 +658,7 @@ function build_element_attribute_update(element, node_id, name, value, attribute
 	}
 
 	return b.call(
-		name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute',
+		name.startsWith('xlink') && !custom_renderer ? '$.set_xlink_attribute' : '$.set_attribute',
 		node_id,
 		b.literal(name),
 		value,
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index a15fc48596..1bf298c38f 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -23,6 +23,19 @@ import { ATTACHMENT_KEY, NAMESPACE_HTML, UNINITIALIZED } from '../../../../const
 import { branch, destroy_effect, effect, managed } from '../../reactivity/effects.js';
 import { init_select, select_option } from './bindings/select.js';
 import { flatten } from '../../reactivity/async.js';
+import {
+	has_attribute,
+	get_attribute,
+	remove_attribute,
+	set_attribute as set_attribute_op,
+	remove_event_listener,
+	node_name,
+	set_element_value,
+	set_element_checked,
+	set_element_default_value,
+	set_element_default_checked
+} from '../operations.js';
+import { renderer } from '../../custom-renderer/state.js';
 
 export const CLASS = Symbol('class');
 export const STYLE = Symbol('style');
@@ -45,6 +58,8 @@ const PROGRESS_TAG = IS_XHTML ? 'progress' : 'PROGRESS';
 export function remove_input_defaults(input) {
 	if (!hydrating) return;
 
+	// we should be safe here from custom renderers as this only run during hydration
+
 	var already_removed = false;
 
 	// We try and remove the default attributes later, rather than sync during hydration.
@@ -56,13 +71,13 @@ export function remove_input_defaults(input) {
 		already_removed = true;
 
 		// Remove the attributes but preserve the values
-		if (input.hasAttribute('value')) {
+		if (has_attribute(input, 'value')) {
 			var value = input.value;
 			set_attribute(input, 'value', null);
 			input.value = value;
 		}
 
-		if (input.hasAttribute('checked')) {
+		if (has_attribute(input, 'checked')) {
 			var checked = input.checked;
 			set_attribute(input, 'checked', null);
 			input.checked = checked;
@@ -89,13 +104,12 @@ export function set_value(element, value) {
 				value ?? undefined) ||
 		// @ts-expect-error
 		// `progress` elements always need their value set when it's `0`
-		(element.value === value && (value !== 0 || element.nodeName !== PROGRESS_TAG))
+		(element.value === value && (value !== 0 || node_name(element) !== PROGRESS_TAG))
 	) {
 		return;
 	}
 
-	// @ts-expect-error
-	element.value = value ?? '';
+	set_element_value(element, value);
 }
 
 /**
@@ -114,8 +128,7 @@ export function set_checked(element, checked) {
 		return;
 	}
 
-	// @ts-expect-error
-	element.checked = checked;
+	set_element_checked(element, checked);
 }
 
 /**
@@ -129,11 +142,11 @@ export function set_selected(element, selected) {
 	if (selected) {
 		// The selected option could've changed via user selection, and
 		// setting the value without this check would set it back.
-		if (!element.hasAttribute('selected')) {
-			element.setAttribute('selected', '');
+		if (!has_attribute(element, 'selected')) {
+			set_attribute_op(element, 'selected', '');
 		}
 	} else {
-		element.removeAttribute('selected');
+		remove_attribute(element, 'selected');
 	}
 }
 
@@ -143,9 +156,7 @@ export function set_selected(element, selected) {
  * @param {boolean} checked
  */
 export function set_default_checked(element, checked) {
-	const existing_value = element.checked;
-	element.defaultChecked = checked;
-	element.checked = existing_value;
+	set_element_default_checked(element, checked);
 }
 
 /**
@@ -154,9 +165,7 @@ export function set_default_checked(element, checked) {
  * @param {string} value
  */
 export function set_default_value(element, value) {
-	const existing_value = element.value;
-	element.defaultValue = value;
-	element.value = existing_value;
+	set_element_default_value(element, value);
 }
 
 /**
@@ -169,12 +178,12 @@ export function set_attribute(element, attribute, value, skip_warning) {
 	var attributes = get_attributes(element);
 
 	if (hydrating) {
-		attributes[attribute] = element.getAttribute(attribute);
+		attributes[attribute] = get_attribute(element, attribute);
 
 		if (
 			attribute === 'src' ||
 			attribute === 'srcset' ||
-			(attribute === 'href' && element.nodeName === LINK_TAG)
+			(attribute === 'href' && node_name(element) === LINK_TAG)
 		) {
 			if (!skip_warning) {
 				check_src_in_dev_hydration(element, attribute, value ?? '');
@@ -196,12 +205,12 @@ export function set_attribute(element, attribute, value, skip_warning) {
 	}
 
 	if (value == null) {
-		element.removeAttribute(attribute);
+		remove_attribute(element, attribute);
 	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
 		// @ts-ignore
 		element[attribute] = value;
 	} else {
-		element.setAttribute(attribute, value);
+		set_attribute_op(element, attribute, value);
 	}
 }
 
@@ -211,6 +220,7 @@ export function set_attribute(element, attribute, value, skip_warning) {
  * @param {string} value
  */
 export function set_xlink_attribute(dom, attribute, value) {
+	// custom renderer safe since we never emit this
 	dom.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
 }
 
@@ -220,6 +230,7 @@ export function set_xlink_attribute(dom, attribute, value) {
  * @param {any} value
  */
 export function set_custom_element_data(node, prop, value) {
+	// custom renderer safe since we never emit this
 	// We need to ensure that setting custom element props, which can
 	// invoke lifecycle methods on other custom elements, does not also
 	// associate those lifecycle methods with the current active reaction
@@ -244,10 +255,10 @@ export function set_custom_element_data(node, prop, value) {
 			// Don't compute setters for custom elements while they aren't registered yet,
 			// because during their upgrade/instantiation they might add more setters.
 			// Instead, fall back to a simple "an object, then set as property" heuristic.
-			(setters_cache.has(node.getAttribute('is') || node.nodeName) ||
+			(setters_cache.has(get_attribute(node, 'is') || (node_name(node) ?? '')) ||
 			// customElements may not be available in browser extension contexts
 			!customElements ||
-			customElements.get(node.getAttribute('is') || node.nodeName.toLowerCase())
+			customElements.get(get_attribute(node, 'is') || (node_name(node) ?? '').toLowerCase())
 				? get_setters(node).includes(prop)
 				: value && typeof value === 'object')
 		) {
@@ -286,7 +297,7 @@ function set_attributes(
 	should_remove_defaults = false,
 	skip_warning = false
 ) {
-	if (hydrating && should_remove_defaults && element.nodeName === INPUT_TAG) {
+	if (hydrating && should_remove_defaults && node_name(element) === INPUT_TAG) {
 		var input = /** @type {HTMLInputElement} */ (element);
 		var attribute = input.type === 'checkbox' ? 'defaultChecked' : 'defaultValue';
 
@@ -308,7 +319,7 @@ function set_attributes(
 	}
 
 	var current = prev || {};
-	var is_option_element = element.nodeName === OPTION_TAG;
+	var is_option_element = node_name(element) === OPTION_TAG;
 
 	for (var key in prev) {
 		if (!(key in next)) {
@@ -370,7 +381,7 @@ function set_attributes(
 		var prev_value = current[key];
 
 		// Skip if value is unchanged, unless it's `undefined` and the element still has the attribute
-		if (value === prev_value && !(value === undefined && element.hasAttribute(key))) {
+		if (value === prev_value && !(value === undefined && has_attribute(element, key))) {
 			continue;
 		}
 
@@ -398,7 +409,7 @@ function set_attributes(
 				// https://github.com/sveltejs/svelte/issues/11903
 				if (value != null) continue;
 
-				element.removeEventListener(event_name, current[event_handle_key], opts);
+				remove_event_listener(element, event_name, current[event_handle_key], opts);
 				current[event_handle_key] = null;
 			}
 
@@ -424,7 +435,8 @@ function set_attributes(
 		} else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) {
 			// @ts-ignore We're not running this for custom elements because __value is actually
 			// how Lit stores the current value on the element, and messing with that would break things.
-			element.value = element.__value = value;
+			element.__value = value;
+			set_element_value(element, value);
 		} else if (key === 'selected' && is_option_element) {
 			set_selected(/** @type {HTMLOptionElement} */ (element), value);
 		} else {
@@ -437,25 +449,28 @@ function set_attributes(
 
 			if (value == null && !is_custom_element && !is_default) {
 				attributes[key] = null;
-
-				if (name === 'value' || name === 'checked') {
+				if ((name === 'value' || name === 'checked') && renderer == null) {
 					// removing value/checked also removes defaultValue/defaultChecked — preserve
 					let input = /** @type {HTMLInputElement} */ (element);
 					const use_default = prev === undefined;
 					if (name === 'value') {
 						let previous = input.defaultValue;
-						input.removeAttribute(name);
-						input.defaultValue = previous;
+						remove_attribute(input, name);
+						set_element_default_value(input, previous);
 						// @ts-ignore
-						input.value = input.__value = use_default ? previous : null;
+						set_element_value(input, (input.__value = use_default ? previous : null));
 					} else {
 						let previous = input.defaultChecked;
-						input.removeAttribute(name);
-						input.defaultChecked = previous;
-						input.checked = use_default ? previous : false;
+						remove_attribute(input, name);
+						set_element_default_checked(input, previous);
+						set_element_checked(input, use_default ? previous : false);
 					}
 				} else {
-					element.removeAttribute(key);
+					remove_attribute(element, key);
+					if (name === 'value') {
+						// @ts-ignore
+						element.__value = null;
+					}
 				}
 			} else if (
 				is_default ||
@@ -505,7 +520,7 @@ export function attribute_effect(
 		/** @type {Record<symbol, Effect>} */
 		var effects = {};
 
-		var is_select = element.nodeName === SELECT_TAG;
+		var is_select = node_name(element) === SELECT_TAG;
 		var inited = false;
 
 		managed(() => {
@@ -563,7 +578,7 @@ function get_attributes(element) {
 	return /** @type {Record<string | symbol, unknown>} **/ (
 		// @ts-expect-error
 		element.__attributes ??= {
-			[IS_CUSTOM_ELEMENT]: element.nodeName.includes('-'),
+			[IS_CUSTOM_ELEMENT]: (node_name(element) ?? '').includes('-'),
 			[IS_HTML]: element.namespaceURI === NAMESPACE_HTML
 		}
 	);
@@ -574,7 +589,9 @@ var setters_cache = new Map();
 
 /** @param {Element} element */
 function get_setters(element) {
-	var cache_key = element.getAttribute('is') || element.nodeName;
+	// if we have a custom renderer we just skip the check all together
+	if (renderer) return [];
+	var cache_key = get_attribute(element, 'is') || (node_name(element) ?? '');
 	var setters = setters_cache.get(cache_key);
 	if (setters) return setters;
 	setters_cache.set(cache_key, (setters = []));
@@ -606,12 +623,13 @@ function get_setters(element) {
  * @param {string} value
  */
 function check_src_in_dev_hydration(element, attribute, value) {
-	if (!DEV) return;
+	if (!DEV || renderer != null) return;
 	if (attribute === 'srcset' && srcset_url_equal(element, value)) return;
-	if (src_url_equal(element.getAttribute(attribute) ?? '', value)) return;
+	if (src_url_equal(get_attribute(element, attribute) ?? '', value)) return;
 
 	w.hydration_attribute_changed(
 		attribute,
+		// TODO RENDERER figure out what to do here
 		element.outerHTML.replace(element.innerHTML, element.innerHTML && '...'),
 		String(value)
 	);
@@ -623,7 +641,7 @@ function check_src_in_dev_hydration(element, attribute, value) {
  * @returns {boolean}
  */
 function src_url_equal(element_src, url) {
-	if (element_src === url) return true;
+	if (element_src === url || renderer != null) return true;
 	return new URL(element_src, document.baseURI).href === new URL(url, document.baseURI).href;
 }
 
@@ -638,6 +656,7 @@ function split_srcset(srcset) {
  * @returns {boolean}
  */
 function srcset_url_equal(element, srcset) {
+	if (renderer != null) return true;
 	var element_urls = split_srcset(element.srcset);
 	var urls = split_srcset(srcset);
 
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 7b592b84f9..065b0f51ab 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -540,6 +540,80 @@ export function get_node_value(node) {
 	return node.nodeValue;
 }
 
+/**
+ * Sets the `value` property on an element. For custom renderers, uses `setAttribute`.
+ * @param {Element} element
+ * @param {any} value
+ */
+export function set_element_value(element, value) {
+	if (renderer) {
+		renderer.setAttribute(element, 'value', value ?? '');
+		return;
+	}
+	// @ts-expect-error
+	element.value = value ?? '';
+}
+
+/**
+ * Sets the `checked` property on an element. For custom renderers, uses `setAttribute`.
+ * @param {Element} element
+ * @param {boolean} checked
+ */
+export function set_element_checked(element, checked) {
+	if (renderer) {
+		if (checked) {
+			renderer.setAttribute(element, 'checked', '');
+		} else {
+			renderer.removeAttribute(element, 'checked');
+		}
+		return;
+	}
+	// @ts-expect-error
+	element.checked = checked;
+}
+
+/**
+ * Sets the `defaultValue` property on an element without affecting the current `value`.
+ * For custom renderers, uses `setAttribute` on `defaultvalue`.
+ * @param {Element} element
+ * @param {string} value
+ */
+export function set_element_default_value(element, value) {
+	if (renderer) {
+		renderer.setAttribute(element, 'defaultvalue', value);
+		return;
+	}
+	// @ts-expect-error
+	const existing_value = element.value;
+	// @ts-expect-error
+	element.defaultValue = value;
+	// @ts-expect-error
+	element.value = existing_value;
+}
+
+/**
+ * Sets the `defaultChecked` property on an element without affecting the current `checked` state.
+ * For custom renderers, uses `setAttribute` on `defaultchecked`.
+ * @param {Element} element
+ * @param {boolean} checked
+ */
+export function set_element_default_checked(element, checked) {
+	if (renderer) {
+		if (checked) {
+			renderer.setAttribute(element, 'defaultchecked', '');
+		} else {
+			renderer.removeAttribute(element, 'defaultchecked');
+		}
+		return;
+	}
+	// @ts-expect-error
+	const existing_value = element.checked;
+	// @ts-expect-error
+	element.defaultChecked = checked;
+	// @ts-expect-error
+	element.checked = existing_value;
+}
+
 /**
  * @param {Element} element
  * @param {string} name
diff --git a/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/_config.js b/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/_config.js
new file mode 100644
index 0000000000..b656ac37df
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/_config.js
@@ -0,0 +1,65 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, serialize, dispatch_event }) {
+		// Initial state
+		const html = serialize(target);
+
+		// Find all inputs and the button
+		const inputs = target.children.filter(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'input'
+		);
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+
+		assert.equal(inputs.length, 5);
+		assert.ok(button);
+
+		// Input 1: value="hello"
+		const input_value = inputs[0];
+		assert.equal(input_value.attributes['value'], 'hello');
+
+		// Input 2: type="checkbox" checked=""
+		const input_checked = inputs[1];
+		assert.equal(input_checked.attributes['type'], 'checkbox');
+		assert.equal(input_checked.attributes['checked'], '');
+
+		// Input 3: value="fixed" defaultvalue="default_val"
+		const input_default_value = inputs[2];
+		assert.equal(input_default_value.attributes['value'], 'fixed');
+		assert.equal(input_default_value.attributes['defaultvalue'], 'default_val');
+
+		// Input 4: type="checkbox" checked="" defaultchecked=""
+		const input_default_checked = inputs[3];
+		assert.equal(input_default_checked.attributes['type'], 'checkbox');
+		assert.equal(input_default_checked.attributes['checked'], '');
+		assert.equal(input_default_checked.attributes['defaultchecked'], '');
+
+		// Input 5: spread attributes
+		const input_spread = inputs[4];
+		assert.equal(input_spread.attributes['value'], 'hello');
+
+		// Click the button to update all values
+		dispatch_event(button, 'click');
+		flushSync();
+
+		// After update:
+		// Input 1: value="world"
+		assert.equal(input_value.attributes['value'], 'world');
+
+		// Input 2: checked should be removed
+		assert.equal(input_checked.attributes['checked'], undefined);
+
+		// Input 3: defaultvalue="new_default", value still "fixed"
+		assert.equal(input_default_value.attributes['value'], 'fixed');
+		assert.equal(input_default_value.attributes['defaultvalue'], 'new_default');
+
+		// Input 4: defaultchecked should be removed
+		assert.equal(input_default_checked.attributes['defaultchecked'], undefined);
+
+		// Input 5: spread attributes should update value to "world"
+		assert.equal(input_spread.attributes['value'], 'world');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/main.svelte b/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/main.svelte
new file mode 100644
index 0000000000..097bdc0a39
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let value = $state("hello");
+	let checked = $state(true);
+	let default_value = $state("default_val");
+	let default_checked = $state(true);
+	let spread = $derived({value});
+</script>
+
+<input value={value} />
+<input type="checkbox" checked={checked} />
+<input value="fixed" defaultValue={default_value} />
+<input type="checkbox" checked defaultChecked={default_checked} />
+<input {...spread} />
+
+<button onclick={() => {
+	value = "world";
+	checked = false;
+	default_value = "new_default";
+	default_checked = false;
+}}>update</button>

From 68300522543157926bc9b1d3f665d8eb3bee200d Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 16:28:18 +0200
Subject: [PATCH 22/88] fix: style and class special case

---
 .../client/visitors/RegularElement.js           |  5 ++++-
 .../src/internal/client/dom/elements/class.js   | 14 ++++++++++----
 .../src/internal/client/dom/elements/style.js   | 17 ++++++++++++-----
 .../_config.js                                  |  9 ++++++++-
 .../main.svelte                                 |  8 ++++++--
 5 files changed, 40 insertions(+), 13 deletions(-)
 rename packages/svelte/tests/custom-renderers/samples/{value-checked-attributes => special-attributes}/_config.js (82%)
 rename packages/svelte/tests/custom-renderers/samples/{value-checked-attributes => special-attributes}/main.svelte (68%)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index f5f574f328..ae09ca7922 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -38,7 +38,10 @@ import { TEMPLATE_FRAGMENT } from '../../../../../constants.js';
  * @param {ComponentContext} context
  */
 export function RegularElement(node, context) {
-	const is_html = context.state.metadata.namespace === 'html' && node.name !== 'svg';
+	const is_html =
+		context.state.metadata.namespace === 'html' &&
+		node.name !== 'svg' &&
+		!context.state.options.customRenderer;
 	const name = is_html ? node.name.toLowerCase() : node.name;
 	context.state.template.push_element(name, node.start, is_html);
 
diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
index 038ce33f3e..063e67a70b 100644
--- a/packages/svelte/src/internal/client/dom/elements/class.js
+++ b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -1,5 +1,11 @@
 import { to_class } from '../../../shared/attributes.js';
 import { hydrating } from '../hydration.js';
+import {
+	class_list_toggle,
+	get_attribute,
+	remove_attribute,
+	set_attribute
+} from '../operations.js';
 
 /**
  * @param {Element} dom
@@ -21,17 +27,17 @@ export function set_class(dom, is_html, value, hash, prev_classes, next_classes)
 	) {
 		var next_class_name = to_class(value, hash, next_classes);
 
-		if (!hydrating || next_class_name !== dom.getAttribute('class')) {
+		if (!hydrating || next_class_name !== get_attribute(dom, 'class')) {
 			// Removing the attribute when the value is only an empty string causes
 			// performance issues vs simply making the className an empty string. So
 			// we should only remove the class if the value is nullish
 			// and there no hash/directives :
 			if (next_class_name == null) {
-				dom.removeAttribute('class');
+				remove_attribute(dom, 'class');
 			} else if (is_html) {
 				dom.className = next_class_name;
 			} else {
-				dom.setAttribute('class', next_class_name);
+				set_attribute(dom, 'class', next_class_name);
 			}
 		}
 
@@ -42,7 +48,7 @@ export function set_class(dom, is_html, value, hash, prev_classes, next_classes)
 			var is_present = !!next_classes[key];
 
 			if (prev_classes == null || is_present !== !!prev_classes[key]) {
-				dom.classList.toggle(key, is_present);
+				class_list_toggle(/** @type {HTMLElement} */ (dom), key, is_present);
 			}
 		}
 	}
diff --git a/packages/svelte/src/internal/client/dom/elements/style.js b/packages/svelte/src/internal/client/dom/elements/style.js
index 3e05eec30e..b5b68eca28 100644
--- a/packages/svelte/src/internal/client/dom/elements/style.js
+++ b/packages/svelte/src/internal/client/dom/elements/style.js
@@ -1,5 +1,12 @@
 import { to_style } from '../../../shared/attributes.js';
 import { hydrating } from '../hydration.js';
+import {
+	style_remove_property,
+	style_set_property,
+	get_attribute,
+	remove_attribute,
+	set_css_text
+} from '../operations.js';
 
 /**
  * @param {Element & ElementCSSInlineStyle} dom
@@ -13,9 +20,9 @@ function update_styles(dom, prev = {}, next, priority) {
 
 		if (prev[key] !== value) {
 			if (next[key] == null) {
-				dom.style.removeProperty(key);
+				style_remove_property(/** @type {HTMLElement} */ (dom), key);
 			} else {
-				dom.style.setProperty(key, value, priority);
+				style_set_property(/** @type {HTMLElement} */ (dom), key, value, priority);
 			}
 		}
 	}
@@ -34,11 +41,11 @@ export function set_style(dom, value, prev_styles, next_styles) {
 	if (hydrating || prev !== value) {
 		var next_style_attr = to_style(value, next_styles);
 
-		if (!hydrating || next_style_attr !== dom.getAttribute('style')) {
+		if (!hydrating || next_style_attr !== get_attribute(dom, 'style')) {
 			if (next_style_attr == null) {
-				dom.removeAttribute('style');
+				remove_attribute(dom, 'style');
 			} else {
-				dom.style.cssText = next_style_attr;
+				set_css_text(/** @type {HTMLElement} */ (dom), next_style_attr);
 			}
 		}
 
diff --git a/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/_config.js b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
similarity index 82%
rename from packages/svelte/tests/custom-renderers/samples/value-checked-attributes/_config.js
rename to packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
index b656ac37df..270aa7975a 100644
--- a/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
@@ -20,6 +20,8 @@ export default test({
 		// Input 1: value="hello"
 		const input_value = inputs[0];
 		assert.equal(input_value.attributes['value'], 'hello');
+		assert.equal(input_value.attributes['class'], 'hello');
+		assert.equal(input_value.attributes['style'], 'color: blue');
 
 		// Input 2: type="checkbox" checked=""
 		const input_checked = inputs[1];
@@ -40,6 +42,8 @@ export default test({
 		// Input 5: spread attributes
 		const input_spread = inputs[4];
 		assert.equal(input_spread.attributes['value'], 'hello');
+		assert.equal(input_spread.attributes['class'], 'hello');
+		assert.equal(input_spread.attributes['style'], 'color: blue');
 
 		// Click the button to update all values
 		dispatch_event(button, 'click');
@@ -48,7 +52,8 @@ export default test({
 		// After update:
 		// Input 1: value="world"
 		assert.equal(input_value.attributes['value'], 'world');
-
+		assert.equal(input_value.attributes['class'], 'world');
+		assert.equal(input_value.attributes['style'], 'color: red');
 		// Input 2: checked should be removed
 		assert.equal(input_checked.attributes['checked'], undefined);
 
@@ -61,5 +66,7 @@ export default test({
 
 		// Input 5: spread attributes should update value to "world"
 		assert.equal(input_spread.attributes['value'], 'world');
+		assert.equal(input_spread.attributes['class'], 'world');
+		assert.equal(input_spread.attributes['style'], 'color: red');
 	}
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/main.svelte b/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
similarity index 68%
rename from packages/svelte/tests/custom-renderers/samples/value-checked-attributes/main.svelte
rename to packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
index 097bdc0a39..1139780d5b 100644
--- a/packages/svelte/tests/custom-renderers/samples/value-checked-attributes/main.svelte
+++ b/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
@@ -1,12 +1,14 @@
 <script>
 	let value = $state("hello");
+	let class_name = $state("hello");
+	let style = $state("color: blue");
 	let checked = $state(true);
 	let default_value = $state("default_val");
 	let default_checked = $state(true);
-	let spread = $derived({value});
+	let spread = $derived({value, class: class_name, style});
 </script>
 
-<input value={value} />
+<input {value} class={class_name} {style} />
 <input type="checkbox" checked={checked} />
 <input value="fixed" defaultValue={default_value} />
 <input type="checkbox" checked defaultChecked={default_checked} />
@@ -14,6 +16,8 @@
 
 <button onclick={() => {
 	value = "world";
+	class_name = "world";
+	style = "color: red";
 	checked = false;
 	default_value = "new_default";
 	default_checked = false;

From a0d0f013daca5f3c20c8ee8ad62eaad5b46d22d0 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 16:43:14 +0200
Subject: [PATCH 23/88] fix: un-special case customizable-select

---
 .../phases/2-analyze/visitors/RegularElement.js        |  5 ++++-
 .../3-transform/client/visitors/RegularElement.js      |  2 +-
 .../3-transform/server/visitors/RegularElement.js      | 10 +++++++---
 .../samples/customizable-select/_config.js             |  6 ++++++
 .../samples/customizable-select/main.svelte            |  4 ++++
 5 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/customizable-select/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/customizable-select/main.svelte

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index bc65bd65db..448013cbb6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -110,7 +110,10 @@ export function RegularElement(node, context) {
 
 	// Special case: <select>, <option> or <optgroup> with rich content needs special hydration handling
 	// We mark the subtree as dynamic so parent elements properly include the child init code
-	if (is_customizable_select_element(node) || node.name === 'selectedcontent') {
+	if (
+		(is_customizable_select_element(node) || node.name === 'selectedcontent') &&
+		!context.state.options.customRenderer
+	) {
 		// Mark the element's own fragment as dynamic so it's not treated as static
 		node.fragment.metadata.dynamic = true;
 		// Also mark ancestor fragments so parents properly include the child init code
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index ae09ca7922..5d7232a1aa 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -376,7 +376,7 @@ export function RegularElement(node, context) {
 				);
 			}
 		}
-	} else if (is_customizable_select_element(node)) {
+	} else if (is_customizable_select_element(node) && !context.state.options.customRenderer) {
 		// For <option>, <optgroup>, or <select> elements with rich content, we need to branch based on browser support.
 		// Modern browsers preserve rich HTML in options, older browsers strip it to text only.
 		// We create a separate template for the rich content and append it to the element.
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 42d9bcb667..6eeda68fba 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -110,7 +110,7 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (is_customizable_select_element(node)) {
+		if (is_customizable_select_element(node) && !context.state.options.customRenderer) {
 			rest.push(b.true);
 		}
 
@@ -157,7 +157,7 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (is_customizable_select_element(node)) {
+		if (is_customizable_select_element(node) && !context.state.options.customRenderer) {
 			rest.push(b.true);
 		}
 
@@ -192,7 +192,11 @@ export function RegularElement(node, context) {
 	} else {
 		// For optgroup or select with rich content, add hydration marker at the start
 		process_children(trimmed, { ...context, state });
-		if ((name === 'optgroup' || name === 'select') && is_customizable_select_element(node)) {
+		if (
+			(name === 'optgroup' || name === 'select') &&
+			is_customizable_select_element(node) &&
+			!context.state.options.customRenderer
+		) {
 			state.template.push(b.literal('<!>'));
 		}
 	}
diff --git a/packages/svelte/tests/custom-renderers/samples/customizable-select/_config.js b/packages/svelte/tests/custom-renderers/samples/customizable-select/_config.js
new file mode 100644
index 0000000000..e787e13347
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/customizable-select/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+// this would fail immediately if it was compiling like a rich select because it access the DOM
+export default test({
+	html: '<select><selectedcontent></selectedcontent><option><span>Rich</span></option></select>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/customizable-select/main.svelte b/packages/svelte/tests/custom-renderers/samples/customizable-select/main.svelte
new file mode 100644
index 0000000000..5154309d5d
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/customizable-select/main.svelte
@@ -0,0 +1,4 @@
+<select>
+	<selectedcontent></selectedcontent>
+	<option><span>Rich</span></option>
+</select>
\ No newline at end of file

From 2dc8fd19a34629e3937c36f427d768d554148ec7 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 22:36:50 +0200
Subject: [PATCH 24/88] chore: add full object in output

---
 packages/svelte/tests/custom-renderers/shared.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index 7f98895863..b557b57e75 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -5,6 +5,7 @@ import { compile_directory } from '../helpers.js';
 import { suite_with_variants, type BaseTest } from '../suite.js';
 import type { CompileOptions } from '#compiler';
 import renderer, { create_root, serialize, dispatch_event } from './renderer.js';
+import { writeFile } from 'node:fs/promises';
 
 export interface CustomRendererTest extends BaseTest {
 	html?: string;
@@ -122,6 +123,18 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 			throw err;
 		}
 
+		writeFile(
+			path.join(cwd, '_output/client/output.json'),
+			JSON.stringify(
+				target,
+				(key, value) => {
+					if (key === 'parent') return undefined;
+					return value;
+				},
+				'\t'
+			)
+		);
+
 		if (config.error) {
 			unintended_error = true;
 			assert.fail('Expected a runtime error');

From ff5e835bf077b67bd10ec1e702b97f419ec87f00 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 22:37:41 +0200
Subject: [PATCH 25/88] fix: handle autofocus and muted

---
 .../phases/3-transform/client/visitors/RegularElement.js   | 6 +++---
 .../custom-renderers/samples/special-attributes/_config.js | 7 +++----
 .../samples/special-attributes/main.svelte                 | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 5d7232a1aa..a649d87726 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -257,7 +257,7 @@ export function RegularElement(node, context) {
 				if (name !== 'class' || value) {
 					context.state.template.set_prop(attribute.name, value === true ? '' : value);
 				}
-			} else if (name === 'autofocus') {
+			} else if (name === 'autofocus' && !context.state.options.customRenderer) {
 				let { value } = build_attribute_value(attribute.value, context);
 				context.state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
 			} else if (name === 'class') {
@@ -615,7 +615,7 @@ function build_element_attribute_update(
 	attributes,
 	custom_renderer = false
 ) {
-	if (name === 'muted') {
+	if (name === 'muted' && !custom_renderer) {
 		// Special case for Firefox who needs it set as a property in order to work
 		return b.assignment('=', b.member(node_id, b.id('muted')), value);
 	}
@@ -656,7 +656,7 @@ function build_element_attribute_update(
 		return b.call('$.set_default_checked', node_id, value);
 	}
 
-	if (is_dom_property(name)) {
+	if (is_dom_property(name) && !custom_renderer) {
 		return b.assignment('=', b.member(node_id, name), value);
 	}
 
diff --git a/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
index 270aa7975a..34ff2fe38c 100644
--- a/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
@@ -2,10 +2,7 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	test({ assert, target, serialize, dispatch_event }) {
-		// Initial state
-		const html = serialize(target);
-
+	test({ assert, target, dispatch_event }) {
 		// Find all inputs and the button
 		const inputs = target.children.filter(
 			(/** @type {any} */ n) => n.type === 'element' && n.name === 'input'
@@ -22,6 +19,8 @@ export default test({
 		assert.equal(input_value.attributes['value'], 'hello');
 		assert.equal(input_value.attributes['class'], 'hello');
 		assert.equal(input_value.attributes['style'], 'color: blue');
+		assert.equal(input_value.attributes['autofocus'], 'true');
+		assert.equal(input_value.attributes['muted'], 'true');
 
 		// Input 2: type="checkbox" checked=""
 		const input_checked = inputs[1];
diff --git a/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte b/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
index 1139780d5b..2371fcac8b 100644
--- a/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
+++ b/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
@@ -8,7 +8,7 @@
 	let spread = $derived({value, class: class_name, style});
 </script>
 
-<input {value} class={class_name} {style} />
+<input autofocus muted {value} class={class_name} {style} />
 <input type="checkbox" checked={checked} />
 <input value="fixed" defaultValue={default_value} />
 <input type="checkbox" checked defaultChecked={default_checked} />

From f91c2fd6d88842e3ef96bea135f58bd1c79426b1 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 22:40:07 +0200
Subject: [PATCH 26/88] fix: use operations functions everywhere

---
 .../svelte/src/internal/client/constants.js   |  1 -
 .../svelte/src/internal/client/dev/css.js     |  4 ++-
 .../src/internal/client/dev/elements.js       | 22 +++++++++----
 .../src/internal/client/dev/validation.js     |  1 +
 .../src/internal/client/dom/blocks/await.js   |  4 ++-
 .../internal/client/dom/blocks/css-props.js   |  6 ++--
 .../src/internal/client/dom/blocks/html.js    | 33 +++++++++++--------
 .../src/internal/client/dom/blocks/snippet.js |  7 ++--
 .../client/dom/blocks/svelte-element.js       | 18 +++++++---
 .../internal/client/dom/blocks/svelte-head.js | 17 +++++++---
 .../svelte/src/internal/client/dom/css.js     | 22 +++++++++----
 .../src/internal/client/dom/elements/misc.js  | 11 +++++--
 .../src/internal/client/dom/hydration.js      | 12 +++----
 .../src/internal/client/dom/reconciler.js     |  4 +--
 .../src/internal/client/dom/template.js       |  7 ++--
 packages/svelte/src/internal/client/render.js | 29 ++++++++++------
 16 files changed, 130 insertions(+), 68 deletions(-)

diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 032b6c3e2b..190a947af8 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -69,7 +69,6 @@ export const STALE_REACTION = new (class StaleReactionError extends Error {
 	message = 'The reaction that called `getAbortSignal()` was re-run or destroyed';
 })();
 
-// TODO: DOM access
 export const IS_XHTML =
 	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
 	!!globalThis.document?.contentType &&
diff --git a/packages/svelte/src/internal/client/dev/css.js b/packages/svelte/src/internal/client/dev/css.js
index 96f67f7d10..cc868e92fa 100644
--- a/packages/svelte/src/internal/client/dev/css.js
+++ b/packages/svelte/src/internal/client/dev/css.js
@@ -1,3 +1,5 @@
+import { remove_node } from '../dom/operations';
+
 /** @type {Map<String, Set<HTMLStyleElement>>} */
 var all_styles = new Map();
 
@@ -24,7 +26,7 @@ export function cleanup_styles(hash) {
 	if (!styles) return;
 
 	for (const style of styles) {
-		style.remove();
+		remove_node(style);
 	}
 
 	all_styles.delete(hash);
diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js
index df765607a0..c0a2c14a85 100644
--- a/packages/svelte/src/internal/client/dev/elements.js
+++ b/packages/svelte/src/internal/client/dev/elements.js
@@ -3,6 +3,7 @@ import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE } from '#client/cons
 import { HYDRATION_END, HYDRATION_START } from '../../../constants.js';
 import { hydrating } from '../dom/hydration.js';
 import { dev_stack } from '../context.js';
+import { get_first_child, get_next_sibling, get_node_value, node_type } from '../dom/operations.js';
 
 /**
  * @param {any} fn
@@ -14,7 +15,12 @@ export function add_locations(fn, filename, locations) {
 	return (/** @type {any[]} */ ...args) => {
 		const dom = fn(...args);
 
-		var node = hydrating ? dom : dom.nodeType === DOCUMENT_FRAGMENT_NODE ? dom.firstChild : dom;
+		// check here
+		var node = hydrating
+			? dom
+			: node_type(dom) === DOCUMENT_FRAGMENT_NODE
+				? get_first_child(dom)
+				: dom;
 		assign_locations(node, filename, locations);
 
 		return dom;
@@ -28,13 +34,14 @@ export function add_locations(fn, filename, locations) {
  */
 function assign_location(element, filename, location) {
 	// @ts-expect-error
+	// TODO RENDERER: what if the element is not an object?
 	element.__svelte_meta = {
 		parent: dev_stack,
 		loc: { file: filename, line: location[0], column: location[1] }
 	};
 
 	if (location[2]) {
-		assign_locations(element.firstChild, filename, location[2]);
+		assign_locations(get_first_child(element), filename, location[2]);
 	}
 }
 
@@ -48,16 +55,17 @@ function assign_locations(node, filename, locations) {
 	var depth = 0;
 
 	while (node && i < locations.length) {
-		if (hydrating && node.nodeType === COMMENT_NODE) {
+		if (hydrating && node_type(node) === COMMENT_NODE) {
 			var comment = /** @type {Comment} */ (node);
-			if (comment.data[0] === HYDRATION_START) depth += 1;
-			else if (comment.data[0] === HYDRATION_END) depth -= 1;
+			const data = get_node_value(comment) ?? '';
+			if (data[0] === HYDRATION_START) depth += 1;
+			else if (data[0] === HYDRATION_END) depth -= 1;
 		}
 
-		if (depth === 0 && node.nodeType === ELEMENT_NODE) {
+		if (depth === 0 && node_type(node) === ELEMENT_NODE) {
 			assign_location(/** @type {Element} */ (node), filename, locations[i++]);
 		}
 
-		node = node.nextSibling;
+		node = get_next_sibling(node);
 	}
 }
diff --git a/packages/svelte/src/internal/client/dev/validation.js b/packages/svelte/src/internal/client/dev/validation.js
index 60d140c718..1fc4f3540e 100644
--- a/packages/svelte/src/internal/client/dev/validation.js
+++ b/packages/svelte/src/internal/client/dev/validation.js
@@ -4,6 +4,7 @@ import * as e from '../errors.js';
  * @param {...(()=>any)[]} args
  */
 export function validate_snippet_args(anchor, ...args) {
+	// TODO RENDERER: don't emit validate args for custom renderers
 	if (typeof anchor !== 'object' || !(anchor instanceof Node)) {
 		e.invalid_snippet_arguments();
 	}
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index d6430547b5..4b70e38a0e 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -15,6 +15,7 @@ import { is_runes } from '../../context.js';
 import { Batch, current_batch, flushSync, is_flushing_sync } from '../../reactivity/batch.js';
 import { BranchManager } from './branches.js';
 import { capture, unset_context } from '../../reactivity/async.js';
+import { get_node_value } from '../operations.js';
 
 const PENDING = 0;
 const THEN = 1;
@@ -57,7 +58,8 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 
 		/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
 		// @ts-ignore coercing `node` to a `Comment` causes TypeScript and Prettier to fight
-		let mismatch = hydrating && is_promise(input) === (node.data === HYDRATION_START_ELSE);
+		let mismatch =
+			hydrating && is_promise(input) === (get_node_value(node) === HYDRATION_START_ELSE);
 
 		if (mismatch) {
 			// Hydration mismatch: remove everything inside the anchor and start fresh
diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js
index 084a5561be..ea8b268ff6 100644
--- a/packages/svelte/src/internal/client/dom/blocks/css-props.js
+++ b/packages/svelte/src/internal/client/dom/blocks/css-props.js
@@ -1,6 +1,6 @@
 import { render_effect } from '../../reactivity/effects.js';
 import { hydrating, set_hydrate_node } from '../hydration.js';
-import { get_first_child } from '../operations.js';
+import { get_first_child, style_set_property, style_remove_property } from '../operations.js';
 
 /**
  * @param {HTMLDivElement | SVGGElement} element
@@ -19,9 +19,9 @@ export function css_props(element, get_styles) {
 			var value = styles[key];
 
 			if (value) {
-				element.style.setProperty(key, value);
+				style_set_property(/** @type {HTMLElement} */ (element), key, value);
 			} else {
-				element.style.removeProperty(key);
+				style_remove_property(/** @type {HTMLElement} */ (element), key);
 			}
 		}
 	});
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
index ffe947eb16..cda857c9bc 100644
--- a/packages/svelte/src/internal/client/dom/blocks/html.js
+++ b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -14,7 +14,17 @@ import * as w from '../../warnings.js';
 import { hash, sanitize_location } from '../../../../utils.js';
 import { DEV } from 'esm-env';
 import { dev_current_component_function } from '../../context.js';
-import { create_element, get_first_child, get_next_sibling } from '../operations.js';
+import {
+	create_element,
+	get_first_child,
+	get_next_sibling,
+	get_last_child,
+	set_inner_html,
+	insert_before,
+	get_parent_node,
+	node_type,
+	get_node_value
+} from '../operations.js';
 import { active_effect } from '../../runtime.js';
 import { COMMENT_NODE } from '#client/constants';
 
@@ -81,12 +91,12 @@ export function html(
 			// When @html is the only child, use innerHTML directly.
 			// This also handles contenteditable, where the user may delete the anchor comment.
 			effect.nodes = null;
-			parent_node.innerHTML = /** @type {string} */ (value);
+			set_inner_html(parent_node, /** @type {string} */ (value));
 
 			if (value !== '') {
 				assign_nodes(
 					/** @type {TemplateNode} */ (get_first_child(parent_node)),
-					/** @type {TemplateNode} */ (parent_node.lastChild)
+					/** @type {TemplateNode} */ (get_last_child(parent_node))
 				);
 			}
 
@@ -103,16 +113,13 @@ export function html(
 		if (hydrating) {
 			// We're deliberately not trying to repair mismatches between server and client,
 			// as it's costly and error-prone (and it's an edge case to have a mismatch anyway)
-			var hash = /** @type {Comment} */ (hydrate_node).data;
+			var hash = get_node_value(hydrate_node);
 
 			/** @type {TemplateNode | null} */
 			var next = hydrate_next();
 			var last = next;
 
-			while (
-				next !== null &&
-				(next.nodeType !== COMMENT_NODE || /** @type {Comment} */ (next).data !== '')
-			) {
+			while (next !== null && (node_type(next) !== COMMENT_NODE || get_node_value(next) !== '')) {
 				last = next;
 				next = get_next_sibling(next);
 			}
@@ -123,7 +130,7 @@ export function html(
 			}
 
 			if (DEV && !skip_warning) {
-				check_hash(/** @type {Element} */ (next.parentNode), hash, value);
+				check_hash(/** @type {Element} */ (get_parent_node(next)), hash, value);
 			}
 
 			assign_nodes(hydrate_node, last);
@@ -139,22 +146,22 @@ export function html(
 		var wrapper = /** @type {HTMLTemplateElement | SVGElement | MathMLElement} */ (
 			create_element(svg ? 'svg' : mathml ? 'math' : 'template', ns)
 		);
-		wrapper.innerHTML = /** @type {any} */ (value);
+		set_inner_html(wrapper, /** @type {any} */ (value));
 
 		/** @type {DocumentFragment | Element} */
 		var node = svg || mathml ? wrapper : /** @type {HTMLTemplateElement} */ (wrapper).content;
 
 		assign_nodes(
 			/** @type {TemplateNode} */ (get_first_child(node)),
-			/** @type {TemplateNode} */ (node.lastChild)
+			/** @type {TemplateNode} */ (get_last_child(node))
 		);
 
 		if (svg || mathml) {
 			while (get_first_child(node)) {
-				anchor.before(/** @type {TemplateNode} */ (get_first_child(node)));
+				insert_before(anchor, /** @type {TemplateNode} */ (get_first_child(node)));
 			}
 		} else {
-			anchor.before(node);
+			insert_before(anchor, node);
 		}
 	});
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index 0c4948aca0..343d510e72 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -13,7 +13,7 @@ import { assign_nodes } from '../template.js';
 import * as w from '../../warnings.js';
 import * as e from '../../errors.js';
 import { DEV } from 'esm-env';
-import { get_first_child, get_next_sibling } from '../operations.js';
+import { get_first_child, get_next_sibling, insert_before, node_type } from '../operations.js';
 import { prevent_snippet_stringification } from '../../../shared/validate.js';
 import { BranchManager } from './branches.js';
 
@@ -71,6 +71,7 @@ export function wrap_snippet(component, fn) {
  * @returns {Snippet<Params>}
  */
 export function createRawSnippet(fn) {
+	// TODO RENDERER: throw an error for createRawSnippet in a non-browser environment, as it relies on DOM APIs
 	// @ts-expect-error the types are a lie
 	return (/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
 		var snippet = fn(...params);
@@ -86,11 +87,11 @@ export function createRawSnippet(fn) {
 			var fragment = create_fragment_from_html(html);
 			element = /** @type {Element} */ (get_first_child(fragment));
 
-			if (DEV && (get_next_sibling(element) !== null || element.nodeType !== ELEMENT_NODE)) {
+			if (DEV && (get_next_sibling(element) !== null || node_type(element) !== ELEMENT_NODE)) {
 				w.invalid_raw_snippet_render();
 			}
 
-			anchor.before(element);
+			insert_before(anchor, element);
 		}
 
 		const result = snippet.setup?.(element);
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 6df020d2d7..d11af3dfa4 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -7,7 +7,15 @@ import {
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
-import { create_element, create_text, get_first_child } from '../operations.js';
+import {
+	create_element,
+	create_text,
+	get_first_child,
+	append_child,
+	create_comment,
+	insert_before,
+	node_type
+} from '../operations.js';
 import { block, teardown } from '../../reactivity/effects.js';
 import { set_should_intro } from '../../render.js';
 import { active_effect } from '../../runtime.js';
@@ -40,7 +48,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 	/** @type {null | Element} */
 	var element = null;
 
-	if (hydrating && hydrate_node.nodeType === ELEMENT_NODE) {
+	if (hydrating && node_type(hydrate_node) === ELEMENT_NODE) {
 		element = /** @type {Element} */ (hydrate_node);
 		hydrate_next();
 	}
@@ -90,14 +98,14 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				if (render_fn) {
 					if (hydrating && is_raw_text_element(next_tag)) {
 						// prevent hydration glitches
-						element.append(document.createComment(''));
+						append_child(element, create_comment(''));
 					}
 
 					// If hydrating, use the existing ssr comment as the anchor so that the
 					// inner open and close methods can pick up the existing nodes correctly
 					var child_anchor = hydrating
 						? get_first_child(element)
-						: element.appendChild(create_text());
+						: /** @type {Text} */ (append_child(element, create_text()));
 
 					if (hydrating) {
 						if (child_anchor === null) {
@@ -121,7 +129,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
 				/** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element;
 
-				anchor.before(element);
+				insert_before(anchor, element);
 			}
 
 			if (hydrating) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index 7cab6c3385..11c949f083 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -1,6 +1,14 @@
 /** @import { TemplateNode } from '#client' */
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
-import { create_text, get_first_child, get_next_sibling } from '../operations.js';
+import {
+	create_text,
+	get_first_child,
+	get_next_sibling,
+	remove_node,
+	append_child,
+	node_type,
+	get_node_value
+} from '../operations.js';
 import { block } from '../../reactivity/effects.js';
 import { COMMENT_NODE, EFFECT_PRESERVED, HEAD_EFFECT } from '#client/constants';
 
@@ -10,6 +18,7 @@ import { COMMENT_NODE, EFFECT_PRESERVED, HEAD_EFFECT } from '#client/constants';
  * @returns {void}
  */
 export function head(hash, render_fn) {
+	// TODO RENDERER: throw in case we are using custom renderers as this rely on the head element
 	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
 	// therefore we need to skip that when we detect that we're not in hydration mode.
 	let previous_hydrate_node = null;
@@ -27,7 +36,7 @@ export function head(hash, render_fn) {
 		// rendered in an arbitrary order — find one corresponding to this component
 		while (
 			head_anchor !== null &&
-			(head_anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (head_anchor).data !== hash)
+			(node_type(head_anchor) !== COMMENT_NODE || get_node_value(head_anchor) !== hash)
 		) {
 			head_anchor = get_next_sibling(head_anchor);
 		}
@@ -38,14 +47,14 @@ export function head(hash, render_fn) {
 			set_hydrating(false);
 		} else {
 			var start = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
-			head_anchor.remove(); // in case this component is repeated
+			remove_node(/** @type {ChildNode} */ (head_anchor)); // in case this component is repeated
 
 			set_hydrate_node(start);
 		}
 	}
 
 	if (!hydrating) {
-		anchor = document.head.appendChild(create_text());
+		anchor = /** @type {Comment | Text} */ (append_child(document.head, create_text()));
 	}
 
 	try {
diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js
index 74bf2d49f9..81256f504d 100644
--- a/packages/svelte/src/internal/client/dom/css.js
+++ b/packages/svelte/src/internal/client/dom/css.js
@@ -1,29 +1,39 @@
 import { DEV } from 'esm-env';
 import { register_style } from '../dev/css.js';
 import { effect } from '../reactivity/effects.js';
-import { create_element } from './operations.js';
+import {
+	create_element,
+	get_root_node,
+	query_selector,
+	append_child,
+	set_text_content
+} from './operations.js';
 
 /**
  * @param {Node} anchor
  * @param {{ hash: string, code: string }} css
  */
 export function append_styles(anchor, css) {
+	// TODO RENDERER: disallow css inject with custom renderer?
 	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
 	effect(() => {
-		var root = anchor.getRootNode();
+		var root = get_root_node(anchor);
 
+		// TODO: DOM access
 		var target = /** @type {ShadowRoot} */ (root).host
 			? /** @type {ShadowRoot} */ (root)
-			: /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
+			: // TODO: DOM access
+				/** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
 
 		// Always querying the DOM is roughly the same perf as additionally checking for presence in a map first assuming
 		// that you'll get cache hits half of the time, so we just always query the dom for simplicity and code savings.
-		if (!target.querySelector('#' + css.hash)) {
+		if (!query_selector(/** @type {Element} */ (target), '#' + css.hash)) {
 			const style = create_element('style');
+			// TODO: DOM access
 			style.id = css.hash;
-			style.textContent = css.code;
+			set_text_content(style, css.code);
 
-			target.appendChild(style);
+			append_child(target, style);
 
 			if (DEV) {
 				register_style(css.hash, style);
diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js
index f350d1df8c..eec86f0fa0 100644
--- a/packages/svelte/src/internal/client/dom/elements/misc.js
+++ b/packages/svelte/src/internal/client/dom/elements/misc.js
@@ -1,5 +1,5 @@
 import { hydrating } from '../hydration.js';
-import { clear_text_content, get_first_child } from '../operations.js';
+import { clear_text_content, get_first_child, focus, add_event_listener } from '../operations.js';
 import { queue_micro_task } from '../task.js';
 
 /**
@@ -14,7 +14,7 @@ export function autofocus(dom, value) {
 
 		queue_micro_task(() => {
 			if (document.activeElement === body) {
-				dom.focus();
+				focus(dom);
 			}
 		});
 	}
@@ -27,6 +27,7 @@ export function autofocus(dom, value) {
  * @returns {void}
  */
 export function remove_textarea_child(dom) {
+	// TODO RENDERER: never output in custom render mode
 	if (hydrating && get_first_child(dom) !== null) {
 		clear_text_content(dom);
 	}
@@ -35,15 +36,19 @@ export function remove_textarea_child(dom) {
 let listening_to_form_reset = false;
 
 export function add_form_reset_listener() {
+	// TODO RENDERER: never output in custom render mode
 	if (!listening_to_form_reset) {
 		listening_to_form_reset = true;
-		document.addEventListener(
+		// TODO: DOM access
+		add_event_listener(
+			document,
 			'reset',
 			(evt) => {
 				// Needs to happen one tick later or else the dom properties of the form
 				// elements have not updated to their reset values yet
 				Promise.resolve().then(() => {
 					if (!evt.defaultPrevented) {
+						// TODO: DOM access
 						for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
 							// @ts-expect-error
 							e.__on_r?.();
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 83833f493d..63dea7da5b 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -8,7 +8,7 @@ import {
 	HYDRATION_START_ELSE
 } from '../../../constants.js';
 import * as w from '../warnings.js';
-import { get_next_sibling } from './operations.js';
+import { get_next_sibling, get_node_value, node_type, remove_node } from './operations.js';
 
 /**
  * Use this variable to guard everything related to hydration code so it can be treeshaken out
@@ -89,8 +89,8 @@ export function skip_nodes(remove = true) {
 	var node = hydrate_node;
 
 	while (true) {
-		if (node.nodeType === COMMENT_NODE) {
-			var data = /** @type {Comment} */ (node).data;
+		if (node_type(node) === COMMENT_NODE) {
+			var data = get_node_value(node) ?? '';
 
 			if (data === HYDRATION_END) {
 				if (depth === 0) return node;
@@ -106,7 +106,7 @@ export function skip_nodes(remove = true) {
 		}
 
 		var next = /** @type {TemplateNode} */ (get_next_sibling(node));
-		if (remove) node.remove();
+		if (remove) remove_node(node);
 		node = next;
 	}
 }
@@ -116,10 +116,10 @@ export function skip_nodes(remove = true) {
  * @param {TemplateNode} node
  */
 export function read_hydration_instruction(node) {
-	if (!node || node.nodeType !== COMMENT_NODE) {
+	if (!node || node_type(node) !== COMMENT_NODE) {
 		w.hydration_mismatch();
 		throw HYDRATION_ERROR;
 	}
 
-	return /** @type {Comment} */ (node).data;
+	return get_node_value(node) ?? '';
 }
diff --git a/packages/svelte/src/internal/client/dom/reconciler.js b/packages/svelte/src/internal/client/dom/reconciler.js
index 294cd9c35d..d0001e1ed2 100644
--- a/packages/svelte/src/internal/client/dom/reconciler.js
+++ b/packages/svelte/src/internal/client/dom/reconciler.js
@@ -1,4 +1,4 @@
-import { create_element } from './operations.js';
+import { create_element, set_inner_html } from './operations.js';
 
 const policy =
 	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
@@ -20,6 +20,6 @@ export function create_trusted_html(html) {
  */
 export function create_fragment_from_html(html) {
 	var elem = create_element('template');
-	elem.innerHTML = create_trusted_html(html.replaceAll('<!>', '<!---->')); // XHTML compliance
+	set_inner_html(elem, create_trusted_html(html.replaceAll('<!>', '<!---->'))); // XHTML compliance
 	return elem.content;
 }
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index d7c57765a4..3fa5612a30 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -208,7 +208,7 @@ function fragment_from_tree(structure, ns) {
 		if (children.length > 0) {
 			var target =
 				node_name(element) === TEMPLATE_TAG
-					? // TODO: DOM access
+					? // this is safe for custom renderers because the name will never be `template` due to how `node_name` works
 						/** @type {HTMLTemplateElement} */ (element).content
 					: element;
 
@@ -283,6 +283,7 @@ export function from_tree(structure, flags) {
  * @param {() => Element | DocumentFragment} fn
  */
 export function with_script(fn) {
+	// TODO RENDERER: never emit this for custom renderers
 	return () => run_scripts(fn());
 }
 
@@ -293,6 +294,7 @@ export function with_script(fn) {
  * @returns {Node | Node[]}
  */
 function run_scripts(node) {
+	// this should be custom renderer safe since we never emit `with_script` in that case
 	// scripts were SSR'd, in which case they will run
 	if (hydrating) return node;
 
@@ -307,12 +309,11 @@ function run_scripts(node) {
 
 	for (const script of scripts) {
 		const clone = create_element('script');
-		// TODO: DOM access
+
 		for (var attribute of script.attributes) {
 			set_attribute(clone, attribute.name, attribute.value);
 		}
 
-		// TODO: DOM access
 		set_text_content(clone, script.textContent ?? '');
 
 		// The script has changed - if it's at the edges, the effect now points at dead nodes
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index cb152ed9c1..37d6c401fb 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -6,7 +6,15 @@ import {
 	create_text,
 	get_first_child,
 	get_next_sibling,
-	init_operations
+	init_operations,
+	append_child,
+	add_event_listener,
+	remove_event_listener,
+	get_parent_node,
+	remove_child,
+	set_node_value,
+	get_node_value,
+	node_type
 } from './dom/operations.js';
 import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
 import { active_effect } from './runtime.js';
@@ -47,10 +55,10 @@ export function set_text(text, value) {
 	// For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
 	var str = value == null ? '' : typeof value === 'object' ? `${value}` : value;
 	// @ts-expect-error
-	if (str !== (text.__t ??= text.nodeValue)) {
+	if (str !== (text.__t ??= get_node_value(text))) {
 		// @ts-expect-error
 		text.__t = str;
-		text.nodeValue = `${str}`;
+		set_node_value(text, `${str}`);
 	}
 }
 
@@ -105,7 +113,7 @@ export function hydrate(component, options) {
 
 		while (
 			anchor &&
-			(anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
+			(node_type(anchor) !== COMMENT_NODE || get_node_value(anchor) !== HYDRATION_START)
 		) {
 			anchor = get_next_sibling(anchor);
 		}
@@ -171,7 +179,7 @@ function _mount(
 	var component = undefined;
 
 	var unmount = component_root(() => {
-		var anchor_node = anchor ?? target.appendChild(create_text());
+		var anchor_node = anchor ?? /** @type {Text} */ (append_child(target, create_text()));
 
 		boundary(
 			/** @type {TemplateNode} */ (anchor_node),
@@ -202,8 +210,8 @@ function _mount(
 
 					if (
 						hydrate_node === null ||
-						hydrate_node.nodeType !== COMMENT_NODE ||
-						/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
+						node_type(hydrate_node) !== COMMENT_NODE ||
+						get_node_value(hydrate_node) !== HYDRATION_END
 					) {
 						w.hydration_mismatch();
 						throw HYDRATION_ERROR;
@@ -246,7 +254,7 @@ function _mount(
 					var count = counts.get(event_name);
 
 					if (count === undefined) {
-						node.addEventListener(event_name, handle_event_propagation, { passive });
+						add_event_listener(node, event_name, handle_event_propagation, { passive });
 						counts.set(event_name, 1);
 					} else {
 						counts.set(event_name, count + 1);
@@ -265,7 +273,7 @@ function _mount(
 					var count = /** @type {number} */ (counts.get(event_name));
 
 					if (--count == 0) {
-						node.removeEventListener(event_name, handle_event_propagation);
+						remove_event_listener(node, event_name, handle_event_propagation);
 						counts.delete(event_name);
 
 						if (counts.size === 0) {
@@ -280,7 +288,8 @@ function _mount(
 			root_event_handles.delete(event_handle);
 
 			if (anchor_node !== anchor) {
-				anchor_node.parentNode?.removeChild(anchor_node);
+				var parent = get_parent_node(anchor_node);
+				if (parent) remove_child(parent, /** @type {ChildNode} */ (anchor_node));
 			}
 		};
 	});

From b4cf3d0a71f4506cbb565708f429d264a3fc11e3 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 08:48:51 +0200
Subject: [PATCH 27/88] chore: move option under experimental

---
 packages/svelte/src/compiler/index.js            | 12 ++++++++++--
 .../phases/2-analyze/visitors/Attribute.js       |  2 +-
 .../phases/2-analyze/visitors/RegularElement.js  |  2 +-
 .../3-transform/client/transform-client.js       | 15 +++++++--------
 .../client/transform-template/index.js           |  2 +-
 .../client/visitors/RegularElement.js            | 16 ++++++++++------
 .../client/visitors/shared/fragment.js           |  2 +-
 .../server/visitors/RegularElement.js            | 12 +++++++++---
 packages/svelte/src/compiler/types/index.d.ts    |  8 ++++----
 packages/svelte/src/compiler/validate-options.js |  5 ++---
 packages/svelte/tests/custom-renderers/shared.ts |  7 +++++--
 packages/svelte/types/index.d.ts                 | 16 ++++++++--------
 12 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 1d822514b9..f1a15f2ebf 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -28,7 +28,11 @@ export function compile(source, options) {
 
 	let parsed = _parse(source);
 
-	const { customElement: customElementOptions, ...parsed_options } = parsed.options || {};
+	const {
+		customElement: customElementOptions,
+		customRenderer,
+		...parsed_options
+	} = parsed.options || {};
 
 	/** @type {ValidatedCompileOptions} */
 	const combined_options = {
@@ -36,7 +40,11 @@ export function compile(source, options) {
 		...parsed_options,
 		customElementOptions,
 		css: 'css' in parsed_options ? () => parsed_options.css ?? 'external' : validated.css,
-		runes: 'runes' in parsed_options ? () => parsed_options.runes : validated.runes
+		runes: 'runes' in parsed_options ? () => parsed_options.runes : validated.runes,
+		experimental: {
+			...validated.experimental,
+			...(customRenderer !== undefined ? { customRenderer } : {})
+		}
 	};
 
 	if (parsed.metadata.ts) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 838cbf0413..320760235f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -60,7 +60,7 @@ export function Attribute(node, context) {
 			}
 
 			// we can't delegate event handlers in a non dom environment
-			if (!context.state.options.customRenderer) {
+			if (!context.state.options.experimental.customRenderer) {
 				node.metadata.delegated =
 					parent?.type === 'RegularElement' && can_delegate_event(node.name.slice(2));
 			}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 448013cbb6..e447507fbe 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -112,7 +112,7 @@ export function RegularElement(node, context) {
 	// We mark the subtree as dynamic so parent elements properly include the child init code
 	if (
 		(is_customizable_select_element(node) || node.name === 'selectedcontent') &&
-		!context.state.options.customRenderer
+		!context.state.options.experimental.customRenderer
 	) {
 		// Mark the element's own fragment as dynamic so it's not treated as static
 		node.fragment.metadata.dynamic = true;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 162b979e4c..fb467403be 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -139,13 +139,11 @@ const visitors = {
 };
 
 /**
- * @param {string} custom_renderer_module
+ * @param {string | undefined} custom_renderer_module
  */
 function custom_renderer_imports(custom_renderer_module) {
-	const imports = [
-		b.import_all('$', 'svelte/internal/client'),
-	]
-	if(custom_renderer_module){
+	const imports = [b.import_all('$', 'svelte/internal/client')];
+	if (custom_renderer_module) {
 		imports.push(b.imports([['$renderer', '$renderer', true]], custom_renderer_module));
 	}
 	return imports;
@@ -165,7 +163,8 @@ export function client_component(analysis, options) {
 		scopes: analysis.module.scopes,
 		is_instance: false,
 		hoisted: [
-			...custom_renderer_imports(options.customRenderer), ...analysis.instance_body.hoisted
+			...custom_renderer_imports(options.experimental.customRenderer),
+			...analysis.instance_body.hoisted
 		],
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
@@ -407,7 +406,7 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	if (options.customRenderer) {
+	if (options.experimental.customRenderer) {
 		component_block.body.unshift(
 			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
 		);
@@ -586,7 +585,7 @@ export function client_component(analysis, options) {
 
 	// disclose version attach the svelte version to `window` which is not guaranteed
 	// to be a thing in custom renderers environments
-	if (options.discloseVersion && !options.customRenderer) {
+	if (options.discloseVersion && !options.experimental.customRenderer) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
index e34bfc0123..cae9c94f4d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -36,7 +36,7 @@ function build_locations(nodes) {
  */
 export function transform_template(state, namespace, flags = 0) {
 	// custom renderers needs a tree to work because there's no template element we can use
-	const tree = state.options.fragments === 'tree' || !!state.options.customRenderer;
+	const tree = state.options.fragments === 'tree' || !!state.options.experimental.customRenderer;
 
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index a649d87726..76152b28ed 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -41,7 +41,7 @@ export function RegularElement(node, context) {
 	const is_html =
 		context.state.metadata.namespace === 'html' &&
 		node.name !== 'svg' &&
-		!context.state.options.customRenderer;
+		!context.state.options.experimental.customRenderer;
 	const name = is_html ? node.name.toLowerCase() : node.name;
 	context.state.template.push_element(name, node.start, is_html);
 
@@ -51,7 +51,8 @@ export function RegularElement(node, context) {
 	}
 
 	// we never treat elements as custom element in custom renderers, since we don't want to apply special handling to them (e.g. class merging)
-	const is_custom_element = is_custom_element_node(node) && !context.state.options.customRenderer;
+	const is_custom_element =
+		is_custom_element_node(node) && !context.state.options.experimental.customRenderer;
 
 	// cloneNode is faster, but it does not instantiate the underlying class of the
 	// custom element until the template is connected to the dom, which would
@@ -257,7 +258,7 @@ export function RegularElement(node, context) {
 				if (name !== 'class' || value) {
 					context.state.template.set_prop(attribute.name, value === true ? '' : value);
 				}
-			} else if (name === 'autofocus' && !context.state.options.customRenderer) {
+			} else if (name === 'autofocus' && !context.state.options.experimental.customRenderer) {
 				let { value } = build_attribute_value(attribute.value, context);
 				context.state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
 			} else if (name === 'class') {
@@ -279,7 +280,7 @@ export function RegularElement(node, context) {
 					name,
 					value,
 					attributes,
-					!!context.state.options.customRenderer
+					!!context.state.options.experimental.customRenderer
 				);
 
 				(has_state ? context.state.update : context.state.init).push(b.stmt(update));
@@ -356,7 +357,7 @@ export function RegularElement(node, context) {
 		const empty_string = value.type === 'Literal' && value.value === '';
 
 		if (!empty_string) {
-			if (context.state.options.customRenderer) {
+			if (context.state.options.experimental.customRenderer) {
 				// custom renderers need to use the method to invoke the renderer
 				context.state.template.push_text([
 					{
@@ -376,7 +377,10 @@ export function RegularElement(node, context) {
 				);
 			}
 		}
-	} else if (is_customizable_select_element(node) && !context.state.options.customRenderer) {
+	} else if (
+		is_customizable_select_element(node) &&
+		!context.state.options.experimental.customRenderer
+	) {
 		// For <option>, <optgroup>, or <select> elements with rich content, we need to branch based on browser support.
 		// Modern browsers preserve rich HTML in options, older browsers strip it to text only.
 		// We create a separate template for the rich content and append it to the element.
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index d245665d78..cbf9201638 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -83,7 +83,7 @@ export function process_children(nodes, initial, is_element, context) {
 		if (has_state && !within_bound_contenteditable) {
 			context.state.update.push(update);
 		} else {
-			if (context.state.options.customRenderer) {
+			if (context.state.options.experimental.customRenderer) {
 				// custom renderers need to use the method to invoke the renderer
 				context.state.init.push(update);
 			} else {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 6eeda68fba..822c8342c2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -110,7 +110,10 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (is_customizable_select_element(node) && !context.state.options.customRenderer) {
+		if (
+			is_customizable_select_element(node) &&
+			!context.state.options.experimental.customRenderer
+		) {
 			rest.push(b.true);
 		}
 
@@ -157,7 +160,10 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (is_customizable_select_element(node) && !context.state.options.customRenderer) {
+		if (
+			is_customizable_select_element(node) &&
+			!context.state.options.experimental.customRenderer
+		) {
 			rest.push(b.true);
 		}
 
@@ -195,7 +201,7 @@ export function RegularElement(node, context) {
 		if (
 			(name === 'optgroup' || name === 'select') &&
 			is_customizable_select_element(node) &&
-			!context.state.options.customRenderer
+			!context.state.options.experimental.customRenderer
 		) {
 			state.template.push(b.literal('<!>'));
 		}
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index e033251257..6474c0083f 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -136,10 +136,6 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * @since 5.33
 	 */
 	fragments?: 'html' | 'tree';
-	/**
-	 *  Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
-	 */
-	customRenderer?: string;
 	/**
 	 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 	 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -242,6 +238,10 @@ export interface ModuleCompileOptions {
 		 * @since 5.36
 		 */
 		async?: boolean;
+		/**
+		 * Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
+		 */
+		customRenderer?: string;
 	};
 }
 
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index b7b301dbfc..4ace4333e1 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -44,7 +44,8 @@ const common_options = {
 	warningFilter: fun(() => true),
 
 	experimental: object({
-		async: boolean(false)
+		async: boolean(false),
+		customRenderer: string(undefined)
 	})
 };
 
@@ -97,8 +98,6 @@ const component_options = {
 
 	immutable: deprecate(w.options_deprecated_immutable, boolean(false)),
 
-	customRenderer: string(undefined),
-
 	legacy: removed(
 		'The legacy option has been removed. If you are using this because of legacy.componentApi, use compatibility.componentApi instead'
 	),
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index b557b57e75..b682cd7819 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -54,8 +54,11 @@ async function common_setup(cwd: string, config: CustomRendererTest) {
 		generate: 'client',
 		rootDir: cwd,
 		runes: true,
-		customRenderer: renderer_path,
-		...config.compileOptions
+		...config.compileOptions,
+		experimental: {
+			...config.compileOptions?.experimental,
+			customRenderer: renderer_path
+		}
 	};
 
 	await compile_directory(cwd, 'client', compile_options);
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index cc17fe9ffb..861766b618 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1093,10 +1093,6 @@ declare module 'svelte/compiler' {
 		 * @since 5.33
 		 */
 		fragments?: 'html' | 'tree';
-		/**
-		 *  Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
-		 */
-		customRenderer?: string;
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -1199,6 +1195,10 @@ declare module 'svelte/compiler' {
 			 * @since 5.36
 			 */
 			async?: boolean;
+			/**
+			 * Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
+			 */
+			customRenderer?: string;
 		};
 	}
 	/**
@@ -3168,10 +3168,6 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * @since 5.33
 		 */
 		fragments?: 'html' | 'tree';
-		/**
-		 *  Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
-		 */
-		customRenderer?: string;
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -3274,6 +3270,10 @@ declare module 'svelte/types/compiler/interfaces' {
 			 * @since 5.36
 			 */
 			async?: boolean;
+			/**
+			 * Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
+			 */
+			customRenderer?: string;
 		};
 	}
 	/**

From c189bdcfe308bac35900102bbf674ab3acc2b7a1 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 08:57:53 +0200
Subject: [PATCH 28/88] chore: make option accept a function

---
 packages/svelte/src/compiler/index.js            |  4 ++--
 .../src/compiler/phases/2-analyze/index.js       |  2 ++
 .../phases/2-analyze/visitors/Attribute.js       |  2 +-
 .../phases/2-analyze/visitors/RegularElement.js  |  2 +-
 .../3-transform/client/transform-client.js       |  6 +++---
 .../client/transform-template/index.js           |  2 +-
 .../client/visitors/RegularElement.js            | 16 ++++++----------
 .../client/visitors/shared/fragment.js           |  2 +-
 .../server/visitors/RegularElement.js            | 12 +++---------
 packages/svelte/src/compiler/phases/types.d.ts   |  4 ++++
 packages/svelte/src/compiler/types/index.d.ts    |  5 ++++-
 packages/svelte/src/compiler/validate-options.js | 10 +++++++++-
 packages/svelte/types/index.d.ts                 |  4 ++--
 13 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index f1a15f2ebf..be1b17b1b1 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -30,7 +30,7 @@ export function compile(source, options) {
 
 	const {
 		customElement: customElementOptions,
-		customRenderer,
+		customRenderer: custom_renderer,
 		...parsed_options
 	} = parsed.options || {};
 
@@ -43,7 +43,7 @@ export function compile(source, options) {
 		runes: 'runes' in parsed_options ? () => parsed_options.runes : validated.runes,
 		experimental: {
 			...validated.experimental,
-			...(customRenderer !== undefined ? { customRenderer } : {})
+			...(custom_renderer !== undefined ? { customRenderer: () => custom_renderer } : {})
 		}
 	};
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index dec0081aa9..946ac578c5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -467,6 +467,7 @@ export function analyze_component(root, source, options) {
 
 	const custom_element_from_option = options.customElement({ filename: options.filename });
 	const css = options.css({ filename: options.filename });
+	const custom_renderer = options.experimental.customRenderer({ filename: options.filename });
 	const custom_element = options.customElementOptions ?? custom_element_from_option;
 	const is_custom_element = !!options.customElementOptions || custom_element_from_option;
 
@@ -529,6 +530,7 @@ export function analyze_component(root, source, options) {
 		event_directive_node: null,
 		uses_event_attributes: false,
 		custom_element,
+		custom_renderer,
 		inject_styles: css === 'injected' || is_custom_element,
 		accessors:
 			is_custom_element ||
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 320760235f..f9e3e18724 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -60,7 +60,7 @@ export function Attribute(node, context) {
 			}
 
 			// we can't delegate event handlers in a non dom environment
-			if (!context.state.options.experimental.customRenderer) {
+			if (!context.state.analysis.custom_renderer) {
 				node.metadata.delegated =
 					parent?.type === 'RegularElement' && can_delegate_event(node.name.slice(2));
 			}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index e447507fbe..f32e249b4c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -112,7 +112,7 @@ export function RegularElement(node, context) {
 	// We mark the subtree as dynamic so parent elements properly include the child init code
 	if (
 		(is_customizable_select_element(node) || node.name === 'selectedcontent') &&
-		!context.state.options.experimental.customRenderer
+		!context.state.analysis.custom_renderer
 	) {
 		// Mark the element's own fragment as dynamic so it's not treated as static
 		node.fragment.metadata.dynamic = true;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index fb467403be..115910b751 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -163,7 +163,7 @@ export function client_component(analysis, options) {
 		scopes: analysis.module.scopes,
 		is_instance: false,
 		hoisted: [
-			...custom_renderer_imports(options.experimental.customRenderer),
+			...custom_renderer_imports(analysis.custom_renderer),
 			...analysis.instance_body.hoisted
 		],
 		node: /** @type {any} */ (null), // populated by the root node
@@ -406,7 +406,7 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	if (options.experimental.customRenderer) {
+	if (analysis.custom_renderer) {
 		component_block.body.unshift(
 			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
 		);
@@ -585,7 +585,7 @@ export function client_component(analysis, options) {
 
 	// disclose version attach the svelte version to `window` which is not guaranteed
 	// to be a thing in custom renderers environments
-	if (options.discloseVersion && !options.experimental.customRenderer) {
+	if (options.discloseVersion && !analysis.custom_renderer) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
index cae9c94f4d..3dcc8c228a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -36,7 +36,7 @@ function build_locations(nodes) {
  */
 export function transform_template(state, namespace, flags = 0) {
 	// custom renderers needs a tree to work because there's no template element we can use
-	const tree = state.options.fragments === 'tree' || !!state.options.experimental.customRenderer;
+	const tree = state.options.fragments === 'tree' || !!state.analysis.custom_renderer;
 
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 76152b28ed..468eadca87 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -41,7 +41,7 @@ export function RegularElement(node, context) {
 	const is_html =
 		context.state.metadata.namespace === 'html' &&
 		node.name !== 'svg' &&
-		!context.state.options.experimental.customRenderer;
+		!context.state.analysis.custom_renderer;
 	const name = is_html ? node.name.toLowerCase() : node.name;
 	context.state.template.push_element(name, node.start, is_html);
 
@@ -51,8 +51,7 @@ export function RegularElement(node, context) {
 	}
 
 	// we never treat elements as custom element in custom renderers, since we don't want to apply special handling to them (e.g. class merging)
-	const is_custom_element =
-		is_custom_element_node(node) && !context.state.options.experimental.customRenderer;
+	const is_custom_element = is_custom_element_node(node) && !context.state.analysis.custom_renderer;
 
 	// cloneNode is faster, but it does not instantiate the underlying class of the
 	// custom element until the template is connected to the dom, which would
@@ -258,7 +257,7 @@ export function RegularElement(node, context) {
 				if (name !== 'class' || value) {
 					context.state.template.set_prop(attribute.name, value === true ? '' : value);
 				}
-			} else if (name === 'autofocus' && !context.state.options.experimental.customRenderer) {
+			} else if (name === 'autofocus' && !context.state.analysis.custom_renderer) {
 				let { value } = build_attribute_value(attribute.value, context);
 				context.state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
 			} else if (name === 'class') {
@@ -280,7 +279,7 @@ export function RegularElement(node, context) {
 					name,
 					value,
 					attributes,
-					!!context.state.options.experimental.customRenderer
+					!!context.state.analysis.custom_renderer
 				);
 
 				(has_state ? context.state.update : context.state.init).push(b.stmt(update));
@@ -357,7 +356,7 @@ export function RegularElement(node, context) {
 		const empty_string = value.type === 'Literal' && value.value === '';
 
 		if (!empty_string) {
-			if (context.state.options.experimental.customRenderer) {
+			if (context.state.analysis.custom_renderer) {
 				// custom renderers need to use the method to invoke the renderer
 				context.state.template.push_text([
 					{
@@ -377,10 +376,7 @@ export function RegularElement(node, context) {
 				);
 			}
 		}
-	} else if (
-		is_customizable_select_element(node) &&
-		!context.state.options.experimental.customRenderer
-	) {
+	} else if (is_customizable_select_element(node) && !context.state.analysis.custom_renderer) {
 		// For <option>, <optgroup>, or <select> elements with rich content, we need to branch based on browser support.
 		// Modern browsers preserve rich HTML in options, older browsers strip it to text only.
 		// We create a separate template for the rich content and append it to the element.
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index cbf9201638..b03095d943 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -83,7 +83,7 @@ export function process_children(nodes, initial, is_element, context) {
 		if (has_state && !within_bound_contenteditable) {
 			context.state.update.push(update);
 		} else {
-			if (context.state.options.experimental.customRenderer) {
+			if (context.state.analysis.custom_renderer) {
 				// custom renderers need to use the method to invoke the renderer
 				context.state.init.push(update);
 			} else {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 822c8342c2..963acc1ca5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -110,10 +110,7 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (
-			is_customizable_select_element(node) &&
-			!context.state.options.experimental.customRenderer
-		) {
+		if (is_customizable_select_element(node) && !context.state.analysis.custom_renderer) {
 			rest.push(b.true);
 		}
 
@@ -160,10 +157,7 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (
-			is_customizable_select_element(node) &&
-			!context.state.options.experimental.customRenderer
-		) {
+		if (is_customizable_select_element(node) && !context.state.analysis.custom_renderer) {
 			rest.push(b.true);
 		}
 
@@ -201,7 +195,7 @@ export function RegularElement(node, context) {
 		if (
 			(name === 'optgroup' || name === 'select') &&
 			is_customizable_select_element(node) &&
-			!context.state.options.experimental.customRenderer
+			!context.state.analysis.custom_renderer
 		) {
 			state.template.push(b.literal('<!>'));
 		}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index a1a85ce145..54c90ff949 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -100,6 +100,10 @@ export interface ComponentAnalysis extends Analysis {
 	 * or if not present a boolean which corresponds to the compiler option value
 	 */
 	custom_element: boolean | AST.SvelteOptions['customElement'];
+	/**
+	 * The resolved custom renderer module path, or undefined if not using a custom renderer
+	 */
+	custom_renderer: string | undefined;
 	/** If `true`, should append styles through JavaScript */
 	inject_styles: boolean;
 	reactive_statements: Map<LabeledStatement, ReactiveStatement>;
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 6474c0083f..1164e05066 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -241,7 +241,7 @@ export interface ModuleCompileOptions {
 		/**
 		 * Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
 		 */
-		customRenderer?: string;
+		customRenderer?: string | ((options: { filename: string }) => string | undefined);
 	};
 }
 
@@ -249,6 +249,9 @@ export interface ModuleCompileOptions {
 
 export type ValidatedModuleCompileOptions = Omit<Required<ModuleCompileOptions>, 'rootDir'> & {
 	rootDir: ModuleCompileOptions['rootDir'];
+	experimental: Required<Omit<Required<ModuleCompileOptions>['experimental'], 'customRenderer'>> & {
+		customRenderer: (options: { filename: string }) => string | undefined;
+	};
 };
 
 export type ValidatedCompileOptions = ValidatedModuleCompileOptions &
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index 4ace4333e1..674cad5b8c 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -45,7 +45,15 @@ const common_options = {
 
 	experimental: object({
 		async: boolean(false),
-		customRenderer: string(undefined)
+		customRenderer: parametric(
+			/** @type {(options: { filename: string }) => string | undefined} */ (() => undefined),
+			(input, keypath) => {
+				if (input != null && typeof input !== 'string') {
+					throw_error(`${keypath} should be a string, if specified`);
+				}
+				return /** @type {string | undefined} */ (input);
+			}
+		)
 	})
 };
 
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 861766b618..46c984fb75 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1198,7 +1198,7 @@ declare module 'svelte/compiler' {
 			/**
 			 * Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
 			 */
-			customRenderer?: string;
+			customRenderer?: string | ((options: { filename: string }) => string | undefined);
 		};
 	}
 	/**
@@ -3273,7 +3273,7 @@ declare module 'svelte/types/compiler/interfaces' {
 			/**
 			 * Path to a module that exports the custom renderer to use. When this is truthy templating mode will also be automatically set to `functional`
 			 */
-			customRenderer?: string;
+			customRenderer?: string | ((options: { filename: string }) => string | undefined);
 		};
 	}
 	/**

From 100fbbf05f7ca99a76c0e4aad08ad29ab6fe1087 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 09:19:35 +0200
Subject: [PATCH 29/88] fix: conditional invocation

---
 packages/svelte/src/compiler/phases/2-analyze/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 946ac578c5..6dce87bb99 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -467,7 +467,7 @@ export function analyze_component(root, source, options) {
 
 	const custom_element_from_option = options.customElement({ filename: options.filename });
 	const css = options.css({ filename: options.filename });
-	const custom_renderer = options.experimental.customRenderer({ filename: options.filename });
+	const custom_renderer = options.experimental.customRenderer?.({ filename: options.filename });
 	const custom_element = options.customElementOptions ?? custom_element_from_option;
 	const is_custom_element = !!options.customElementOptions || custom_element_from_option;
 

From 098cdebe950ca08fde99d70019f483a9ec50942a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 09:31:50 +0200
Subject: [PATCH 30/88] fix: disallow css injected with custom renderer

---
 .../98-reference/.generated/compile-errors.md |  6 ++++
 .../svelte/messages/compile-errors/options.md |  4 +++
 packages/svelte/src/compiler/errors.js        |  9 ++++++
 .../compiler/phases/1-parse/read/options.js   |  8 ++++++
 .../src/compiler/phases/2-analyze/index.js    |  5 ++++
 .../svelte/src/internal/client/dom/css.js     | 13 ++-------
 .../src/internal/client/dom/operations.js     | 28 -------------------
 .../css-injected-compiler-option/_config.js   |  9 ++++++
 .../css-injected-compiler-option/main.svelte  |  7 +++++
 .../samples/css-injected-mixed/_config.js     |  6 ++++
 .../samples/css-injected-mixed/main.svelte    |  9 ++++++
 .../css-injected-svelte-options/_config.js    |  6 ++++
 .../css-injected-svelte-options/main.svelte   |  9 ++++++
 .../svelte/tests/custom-renderers/shared.ts   | 26 +++++++++++++++--
 14 files changed, 104 insertions(+), 41 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/css-injected-mixed/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/main.svelte

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 01b2dd1494..43493993b8 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -689,6 +689,12 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
+### options_css_injected_with_custom_renderer
+
+```
+`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection
+```
+
 ### options_invalid_value
 
 ```
diff --git a/packages/svelte/messages/compile-errors/options.md b/packages/svelte/messages/compile-errors/options.md
index 0709f0d3f6..f841aacd2b 100644
--- a/packages/svelte/messages/compile-errors/options.md
+++ b/packages/svelte/messages/compile-errors/options.md
@@ -1,3 +1,7 @@
+## options_css_injected_with_custom_renderer
+
+> `css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection
+
 ## options_invalid_value
 
 > Invalid compiler option: %details%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 976925d181..b97879ccee 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -47,6 +47,15 @@ function e(node, code, message) {
 	throw new InternalCompileError(code, message, start !== undefined ? [start, end ?? start] : undefined);
 }
 
+/**
+ * `css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function options_css_injected_with_custom_renderer(node) {
+	e(node, 'options_css_injected_with_custom_renderer', `\`css: "injected"\` is not compatible with \`customRenderer\` — custom renderers do not support CSS injection\nhttps://svelte.dev/e/options_css_injected_with_custom_renderer`);
+}
+
 /**
  * Invalid compiler option: %details%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index dc14bd47f8..a55a23357e 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -197,6 +197,14 @@ export default function read_options(node) {
 		}
 	}
 
+	if (component_options.css === 'injected' && component_options.customRenderer !== undefined) {
+		// Find the css attribute node for the error position
+		const css_attribute = node.attributes.find(
+			(/** @type {any} */ a) => a.type === 'Attribute' && a.name === 'css'
+		);
+		e.options_css_injected_with_custom_renderer(css_attribute ?? node);
+	}
+
 	return component_options;
 }
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 6dce87bb99..75cb299e2f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -468,6 +468,11 @@ export function analyze_component(root, source, options) {
 	const custom_element_from_option = options.customElement({ filename: options.filename });
 	const css = options.css({ filename: options.filename });
 	const custom_renderer = options.experimental.customRenderer?.({ filename: options.filename });
+
+	if (css === 'injected' && custom_renderer !== undefined) {
+		e.options_css_injected_with_custom_renderer(null);
+	}
+
 	const custom_element = options.customElementOptions ?? custom_element_from_option;
 	const is_custom_element = !!options.customElementOptions || custom_element_from_option;
 
diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js
index 81256f504d..c16e7fc48f 100644
--- a/packages/svelte/src/internal/client/dom/css.js
+++ b/packages/svelte/src/internal/client/dom/css.js
@@ -1,23 +1,16 @@
 import { DEV } from 'esm-env';
 import { register_style } from '../dev/css.js';
 import { effect } from '../reactivity/effects.js';
-import {
-	create_element,
-	get_root_node,
-	query_selector,
-	append_child,
-	set_text_content
-} from './operations.js';
+import { create_element, append_child, set_text_content } from './operations.js';
 
 /**
  * @param {Node} anchor
  * @param {{ hash: string, code: string }} css
  */
 export function append_styles(anchor, css) {
-	// TODO RENDERER: disallow css inject with custom renderer?
 	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
 	effect(() => {
-		var root = get_root_node(anchor);
+		var root = anchor.getRootNode();
 
 		// TODO: DOM access
 		var target = /** @type {ShadowRoot} */ (root).host
@@ -27,7 +20,7 @@ export function append_styles(anchor, css) {
 
 		// Always querying the DOM is roughly the same perf as additionally checking for presence in a map first assuming
 		// that you'll get cache hits half of the time, so we just always query the dom for simplicity and code savings.
-		if (!query_selector(/** @type {Element} */ (target), '#' + css.hash)) {
+		if (!(/** @type {Element} */ (target).querySelector('#' + css.hash))) {
 			const style = create_element('style');
 			// TODO: DOM access
 			style.id = css.hash;
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 065b0f51ab..f18b06d3e0 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -151,7 +151,6 @@ export function first_child(node, is_text = false) {
 		var first = get_first_child(node);
 
 		// TODO prevent user comments with the empty string when preserveComments is true
-		// TODO RENDERER: can we find another way to not have an `isComment` on the renderer?
 		if (is_comment(first) && get_node_value(first) === '') return get_next_sibling(first);
 
 		return first;
@@ -642,8 +641,6 @@ export function remove_attribute(element, name) {
  * @returns {boolean}
  */
 export function has_attribute(element, name) {
-	// TODO RENDERER: could be worth removing and just using get?
-
 	if (renderer) return renderer.hasAttribute(element, name);
 	return element.hasAttribute(name);
 }
@@ -792,42 +789,17 @@ export function class_list_toggle(element, name, force) {
 	element.classList.toggle(name, force);
 }
 
-/**
- * @param {Element} element
- * @param {string} selector
- */
-export function query_selector(element, selector) {
-	if (renderer) {
-		// TODO RENDERER: just used with css inject which doesn't make sense with custom renderers
-		throw new Error('querySelector is not supported with custom renderers');
-	}
-	return element.querySelector(selector);
-}
-
 /**
  * @param {Element | DocumentFragment} element
  * @param {string} selector
  */
 export function query_selector_all(element, selector) {
 	if (renderer) {
-		// TODO RENDERER: just used with css inject which doesn't make sense with custom renderers
 		throw new Error('querySelectorAll is not supported with custom renderers');
 	}
 	return element.querySelectorAll(selector);
 }
 
-/**
- * @param {Node} node
- * @returns {Node}
- */
-export function get_root_node(node) {
-	if (renderer) {
-		// TODO RENDERER: just used with css inject which doesn't make sense with custom renderers
-		throw new Error('getRootNode is not supported with custom renderers');
-	}
-	return node.getRootNode();
-}
-
 /**
  * @param {HTMLElement} element
  */
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js b/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js
new file mode 100644
index 0000000000..963218a3fb
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		css: 'injected'
+	},
+	compile_error:
+		'`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/main.svelte b/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/main.svelte
new file mode 100644
index 0000000000..4f4c13a0f4
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/main.svelte
@@ -0,0 +1,7 @@
+<p>hello</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js b/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js
new file mode 100644
index 0000000000..5b7e622cc7
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error:
+		'`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/main.svelte b/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/main.svelte
new file mode 100644
index 0000000000..0245f4212f
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/main.svelte
@@ -0,0 +1,9 @@
+<svelte:options css="injected" />
+
+<p>hello</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js b/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js
new file mode 100644
index 0000000000..5b7e622cc7
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error:
+		'`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/main.svelte b/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/main.svelte
new file mode 100644
index 0000000000..4f19dc820c
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/main.svelte
@@ -0,0 +1,9 @@
+<svelte:options css="injected" customRenderer="./some-renderer.js" />
+
+<p>hello</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index b682cd7819..0f496257aa 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -12,6 +12,7 @@ export interface CustomRendererTest extends BaseTest {
 	compileOptions?: Partial<CompileOptions>;
 	props?: Record<string, any>;
 	error?: string;
+	compile_error?: string;
 	runtime_error?: string;
 	warnings?: string[];
 	test?: (args: {
@@ -35,7 +36,7 @@ const console_warn = console.warn;
 const renderer_path = path.resolve(import.meta.dirname, 'renderer.js');
 
 export function custom_renderer_suite() {
-	return suite_with_variants<CustomRendererTest, 'custom-renderer', CompileOptions>(
+	return suite_with_variants<CustomRendererTest, 'custom-renderer', CompileOptions | null>(
 		['custom-renderer'],
 		(_variant, _config) => {
 			return false;
@@ -44,12 +45,23 @@ export function custom_renderer_suite() {
 			return common_setup(cwd, config);
 		},
 		async (config, cwd, _variant, common) => {
+			if (common === null) {
+				// compile_error was expected and matched — test passed
+				return;
+			}
+			if (config.compile_error) {
+				// compile_error was expected but common_setup didn't throw
+				assert.fail('Expected a compile error');
+			}
 			await run_test(cwd, config, common);
 		}
 	);
 }
 
-async function common_setup(cwd: string, config: CustomRendererTest) {
+async function common_setup(
+	cwd: string,
+	config: CustomRendererTest
+): Promise<CompileOptions | null> {
 	const compile_options: CompileOptions = {
 		generate: 'client',
 		rootDir: cwd,
@@ -61,7 +73,15 @@ async function common_setup(cwd: string, config: CustomRendererTest) {
 		}
 	};
 
-	await compile_directory(cwd, 'client', compile_options);
+	try {
+		await compile_directory(cwd, 'client', compile_options);
+	} catch (err) {
+		if (config.compile_error) {
+			assert.include((err as Error).message, config.compile_error);
+			return null;
+		}
+		throw err;
+	}
 
 	return compile_options;
 }

From df42e4babd326dfff382d59f6afdfbec1aef9cf9 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 09:50:55 +0200
Subject: [PATCH 31/88] fix: add validations for `svelte:dom` elements

---
 .../docs/98-reference/.generated/compile-errors.md     |  6 ++++++
 packages/svelte/messages/compile-errors/template.md    |  4 ++++
 packages/svelte/src/compiler/errors.js                 | 10 ++++++++++
 .../compiler/phases/2-analyze/visitors/SvelteBody.js   |  4 ++++
 .../phases/2-analyze/visitors/SvelteDocument.js        |  4 ++++
 .../compiler/phases/2-analyze/visitors/SvelteHead.js   |  4 ++++
 .../compiler/phases/2-analyze/visitors/SvelteWindow.js |  4 ++++
 .../3-transform/client/transform-template/index.js     |  2 +-
 .../src/internal/client/dom/blocks/svelte-head.js      |  1 -
 .../custom-renderers/samples/svelte-body/_config.js    |  5 +++++
 .../custom-renderers/samples/svelte-body/main.svelte   |  1 +
 .../samples/svelte-document/_config.js                 |  5 +++++
 .../samples/svelte-document/main.svelte                |  1 +
 .../custom-renderers/samples/svelte-head/_config.js    |  5 +++++
 .../custom-renderers/samples/svelte-head/main.svelte   |  9 +++++++++
 .../custom-renderers/samples/svelte-window/_config.js  |  5 +++++
 .../custom-renderers/samples/svelte-window/main.svelte |  1 +
 17 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-body/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-body/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-document/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-document/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-head/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-head/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-window/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-window/main.svelte

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 43493993b8..c6e2674b88 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -605,6 +605,12 @@ Cannot use `await` in deriveds and template expressions, or at the top level of
 Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 ```
 
+### incompatible_with_custom_renderer
+
+```
+%message% is not compatible with `customRenderer`
+```
+
 ### inspect_trace_generator
 
 ```
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 6aa4335c11..d53cd9e554 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -263,6 +263,10 @@ The same applies to components:
 
 > `<%name%>` does not support non-event attributes or spread attributes
 
+## incompatible_with_custom_renderer
+
+> %message% is not compatible with `customRenderer`
+
 ## js_parse_error
 
 > %message%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index b97879ccee..897013353c 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -1185,6 +1185,16 @@ export function illegal_element_attribute(node, name) {
 	e(node, 'illegal_element_attribute', `\`<${name}>\` does not support non-event attributes or spread attributes\nhttps://svelte.dev/e/illegal_element_attribute`);
 }
 
+/**
+ * %message% is not compatible with `customRenderer`
+ * @param {null | number | NodeLike} node
+ * @param {string} message
+ * @returns {never}
+ */
+export function incompatible_with_custom_renderer(node, message) {
+	e(node, 'incompatible_with_custom_renderer', `${message} is not compatible with \`customRenderer\`\nhttps://svelte.dev/e/incompatible_with_custom_renderer`);
+}
+
 /**
  * %message%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js
index 82bc592c14..1bd353b689 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js
@@ -9,6 +9,10 @@ import { disallow_children } from './shared/special-element.js';
  * @param {Context} context
  */
 export function SvelteBody(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`<svelte:body>`');
+	}
+
 	disallow_children(node);
 	for (const attribute of node.attributes) {
 		if (
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
index fe54ebf30d..067a228692 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
@@ -9,6 +9,10 @@ import { is_event_attribute } from '../../../utils/ast.js';
  * @param {Context} context
  */
 export function SvelteDocument(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`<svelte:document>`');
+	}
+
 	disallow_children(node);
 
 	for (const attribute of node.attributes) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
index 5a3ed44f20..253074e6a7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
@@ -8,6 +8,10 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function SvelteHead(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`<svelte:head>`');
+	}
+
 	for (const attribute of node.attributes) {
 		e.svelte_head_illegal_attribute(attribute);
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
index 20f5abc5d6..ffaaa45258 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
@@ -9,6 +9,10 @@ import { is_event_attribute } from '../../../utils/ast.js';
  * @param {Context} context
  */
 export function SvelteWindow(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`<svelte:window>`');
+	}
+
 	disallow_children(node);
 
 	for (const attribute of node.attributes) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
index 3dcc8c228a..b81746a0e5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -51,7 +51,7 @@ export function transform_template(state, namespace, flags = 0) {
 		flags ? b.literal(flags) : undefined
 	);
 
-	if (state.template.contains_script_tag) {
+	if (state.template.contains_script_tag && !state.analysis.custom_renderer) {
 		call = b.call(`$.with_script`, call);
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index 11c949f083..acdd5fa458 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -18,7 +18,6 @@ import { COMMENT_NODE, EFFECT_PRESERVED, HEAD_EFFECT } from '#client/constants';
  * @returns {void}
  */
 export function head(hash, render_fn) {
-	// TODO RENDERER: throw in case we are using custom renderers as this rely on the head element
 	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
 	// therefore we need to skip that when we detect that we're not in hydration mode.
 	let previous_hydrate_node = null;
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-body/_config.js b/packages/svelte/tests/custom-renderers/samples/svelte-body/_config.js
new file mode 100644
index 0000000000..0756c1c397
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-body/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`<svelte:body>` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-body/main.svelte b/packages/svelte/tests/custom-renderers/samples/svelte-body/main.svelte
new file mode 100644
index 0000000000..d1377e8ca0
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-body/main.svelte
@@ -0,0 +1 @@
+<svelte:body></svelte:body>
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-document/_config.js b/packages/svelte/tests/custom-renderers/samples/svelte-document/_config.js
new file mode 100644
index 0000000000..4ec406039a
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-document/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`<svelte:document>` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-document/main.svelte b/packages/svelte/tests/custom-renderers/samples/svelte-document/main.svelte
new file mode 100644
index 0000000000..f0dc6c5633
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-document/main.svelte
@@ -0,0 +1 @@
+<svelte:document></svelte:document>
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-head/_config.js b/packages/svelte/tests/custom-renderers/samples/svelte-head/_config.js
new file mode 100644
index 0000000000..3a5c5d34cb
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-head/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`<svelte:head>` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-head/main.svelte b/packages/svelte/tests/custom-renderers/samples/svelte-head/main.svelte
new file mode 100644
index 0000000000..cd354a4c07
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-head/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let color = $state('red');
+</script>
+
+<svelte:head>
+	<script>
+		console.log('hello from script');
+	</script>
+</svelte:head>
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-window/_config.js b/packages/svelte/tests/custom-renderers/samples/svelte-window/_config.js
new file mode 100644
index 0000000000..f84268ca2e
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-window/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`<svelte:window>` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-window/main.svelte b/packages/svelte/tests/custom-renderers/samples/svelte-window/main.svelte
new file mode 100644
index 0000000000..47dd4baa23
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-window/main.svelte
@@ -0,0 +1 @@
+<svelte:window></svelte:window>

From 9167c8df4d6c03d02a51e241a20c6b2781dc1c3a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:04:47 +0200
Subject: [PATCH 32/88] fix: disallow `bind` and `transitions`

---
 .../phases/2-analyze/visitors/AnimateDirective.js        | 4 ++++
 .../compiler/phases/2-analyze/visitors/BindDirective.js  | 3 +++
 .../phases/2-analyze/visitors/TransitionDirective.js     | 5 +++++
 .../samples/animate-directive/_config.js                 | 5 +++++
 .../samples/animate-directive/main.svelte                | 9 +++++++++
 .../custom-renderers/samples/bind-component/Child.svelte | 5 +++++
 .../custom-renderers/samples/bind-component/_config.js   | 5 +++++
 .../custom-renderers/samples/bind-component/main.svelte  | 7 +++++++
 .../custom-renderers/samples/bind-directive/_config.js   | 5 +++++
 .../custom-renderers/samples/bind-directive/main.svelte  | 5 +++++
 .../custom-renderers/samples/in-directive/_config.js     | 5 +++++
 .../custom-renderers/samples/in-directive/main.svelte    | 5 +++++
 .../custom-renderers/samples/out-directive/_config.js    | 5 +++++
 .../custom-renderers/samples/out-directive/main.svelte   | 5 +++++
 .../samples/transition-directive/_config.js              | 5 +++++
 .../samples/transition-directive/main.svelte             | 5 +++++
 16 files changed, 83 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/animate-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/animate-directive/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/bind-component/Child.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/bind-component/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/bind-component/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/bind-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/bind-directive/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/in-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/in-directive/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/out-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/out-directive/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/transition-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/transition-directive/main.svelte

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
index 3b4f7007be..e1e431cc8b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
@@ -7,6 +7,10 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function AnimateDirective(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`animate:`');
+	}
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 
 	if (node.metadata.expression.has_await) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index ab541703a0..5701ed438d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -27,6 +27,9 @@ export function BindDirective(node, context) {
 		parent?.type === 'SvelteDocument' ||
 		parent?.type === 'SvelteBody'
 	) {
+		if (context.state.analysis.custom_renderer) {
+			e.incompatible_with_custom_renderer(node, '`bind:`');
+		}
 		if (node.name in binding_properties) {
 			const property = binding_properties[node.name];
 			if (property.valid_elements && !property.valid_elements.includes(parent.name)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
index e50e28a04c..01a6229088 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
@@ -9,6 +9,11 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function TransitionDirective(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		const directive = node.intro && node.outro ? '`transition:`' : node.intro ? '`in:`' : '`out:`';
+		e.incompatible_with_custom_renderer(node, directive);
+	}
+
 	mark_subtree_dynamic(context.path);
 
 	context.next({ ...context.state, expression: node.metadata.expression });
diff --git a/packages/svelte/tests/custom-renderers/samples/animate-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/animate-directive/_config.js
new file mode 100644
index 0000000000..31225d6a4b
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/animate-directive/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`animate:` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/animate-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/animate-directive/main.svelte
new file mode 100644
index 0000000000..ee05d573c6
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/animate-directive/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { flip } from 'svelte/animate';
+
+	let items = [1, 2, 3];
+</script>
+
+{#each items as item (item)}
+	<div animate:flip>{item}</div>
+{/each}
diff --git a/packages/svelte/tests/custom-renderers/samples/bind-component/Child.svelte b/packages/svelte/tests/custom-renderers/samples/bind-component/Child.svelte
new file mode 100644
index 0000000000..ac9ec4cabb
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/bind-component/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let value = $state('hello');
+</script>
+
+{value}
diff --git a/packages/svelte/tests/custom-renderers/samples/bind-component/_config.js b/packages/svelte/tests/custom-renderers/samples/bind-component/_config.js
new file mode 100644
index 0000000000..b653297599
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/bind-component/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'hello'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/bind-component/main.svelte b/packages/svelte/tests/custom-renderers/samples/bind-component/main.svelte
new file mode 100644
index 0000000000..f81a6a32b5
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/bind-component/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Child from './Child.svelte';
+
+	let value = $state('hello');
+</script>
+
+<Child bind:value />
diff --git a/packages/svelte/tests/custom-renderers/samples/bind-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/bind-directive/_config.js
new file mode 100644
index 0000000000..fcba387f65
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/bind-directive/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`bind:` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/bind-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/bind-directive/main.svelte
new file mode 100644
index 0000000000..e19ec21bee
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/bind-directive/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let value = $state('');
+</script>
+
+<input bind:value />
diff --git a/packages/svelte/tests/custom-renderers/samples/in-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/in-directive/_config.js
new file mode 100644
index 0000000000..1da5d37f9d
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/in-directive/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`in:` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/in-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/in-directive/main.svelte
new file mode 100644
index 0000000000..1345e1a3af
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/in-directive/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
+<div in:fade>content</div>
diff --git a/packages/svelte/tests/custom-renderers/samples/out-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/out-directive/_config.js
new file mode 100644
index 0000000000..1e35712b96
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/out-directive/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`out:` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/out-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/out-directive/main.svelte
new file mode 100644
index 0000000000..9b9d676393
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/out-directive/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
+<div out:fade>content</div>
diff --git a/packages/svelte/tests/custom-renderers/samples/transition-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/transition-directive/_config.js
new file mode 100644
index 0000000000..70f59a5886
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/transition-directive/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`transition:` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/transition-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/transition-directive/main.svelte
new file mode 100644
index 0000000000..021567e97c
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/transition-directive/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
+<div transition:fade>content</div>

From 22420042d403cf607b53ec7fe9c3de9e1c4dd83f Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:07:27 +0200
Subject: [PATCH 33/88] chore: cleanup

---
 .../src/internal/client/dom/elements/attributes.js    |  1 -
 packages/svelte/src/internal/client/dom/operations.js | 11 -----------
 packages/svelte/src/internal/client/dom/template.js   |  5 +----
 3 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 1bf298c38f..ab34fe98d2 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -629,7 +629,6 @@ function check_src_in_dev_hydration(element, attribute, value) {
 
 	w.hydration_attribute_changed(
 		attribute,
-		// TODO RENDERER figure out what to do here
 		element.outerHTML.replace(element.innerHTML, element.innerHTML && '...'),
 		String(value)
 	);
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index f18b06d3e0..0971410898 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -789,17 +789,6 @@ export function class_list_toggle(element, name, force) {
 	element.classList.toggle(name, force);
 }
 
-/**
- * @param {Element | DocumentFragment} element
- * @param {string} selector
- */
-export function query_selector_all(element, selector) {
-	if (renderer) {
-		throw new Error('querySelectorAll is not supported with custom renderers');
-	}
-	return element.querySelectorAll(selector);
-}
-
 /**
  * @param {HTMLElement} element
  */
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 3fa5612a30..c8744d7fb1 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -19,7 +19,6 @@ import {
 	set_text_content,
 	replace_with,
 	node_type,
-	query_selector_all,
 	get_node_value,
 	node_name
 } from './operations.js';
@@ -283,7 +282,6 @@ export function from_tree(structure, flags) {
  * @param {() => Element | DocumentFragment} fn
  */
 export function with_script(fn) {
-	// TODO RENDERER: never emit this for custom renderers
 	return () => run_scripts(fn());
 }
 
@@ -300,10 +298,9 @@ function run_scripts(node) {
 
 	const is_fragment = node_type(node) === DOCUMENT_FRAGMENT_NODE;
 	const scripts =
-		// TODO RENDERER: figure out what to do here
 		node_name(node) === SCRIPT_TAG
 			? [/** @type {HTMLScriptElement} */ (node)]
-			: query_selector_all(node, 'script');
+			: node.querySelectorAll('script');
 
 	const effect = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);
 

From 38dc4aee422c41e740a02970bd19fe756c1abcca Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:14:10 +0200
Subject: [PATCH 34/88] chore: cleanup

---
 packages/svelte/src/internal/client/dom/elements/misc.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js
index eec86f0fa0..44b5e6d35e 100644
--- a/packages/svelte/src/internal/client/dom/elements/misc.js
+++ b/packages/svelte/src/internal/client/dom/elements/misc.js
@@ -27,7 +27,6 @@ export function autofocus(dom, value) {
  * @returns {void}
  */
 export function remove_textarea_child(dom) {
-	// TODO RENDERER: never output in custom render mode
 	if (hydrating && get_first_child(dom) !== null) {
 		clear_text_content(dom);
 	}
@@ -36,10 +35,8 @@ export function remove_textarea_child(dom) {
 let listening_to_form_reset = false;
 
 export function add_form_reset_listener() {
-	// TODO RENDERER: never output in custom render mode
 	if (!listening_to_form_reset) {
 		listening_to_form_reset = true;
-		// TODO: DOM access
 		add_event_listener(
 			document,
 			'reset',

From 1886dc9aab691f9e58e80503fe5cce9b08bf8111 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:14:48 +0200
Subject: [PATCH 35/88] chore: cleanup

---
 packages/svelte/src/internal/client/dom/css.js           | 5 +----
 packages/svelte/src/internal/client/dom/elements/misc.js | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js
index c16e7fc48f..c6098690e6 100644
--- a/packages/svelte/src/internal/client/dom/css.js
+++ b/packages/svelte/src/internal/client/dom/css.js
@@ -12,17 +12,14 @@ export function append_styles(anchor, css) {
 	effect(() => {
 		var root = anchor.getRootNode();
 
-		// TODO: DOM access
 		var target = /** @type {ShadowRoot} */ (root).host
 			? /** @type {ShadowRoot} */ (root)
-			: // TODO: DOM access
-				/** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
+			: /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
 
 		// Always querying the DOM is roughly the same perf as additionally checking for presence in a map first assuming
 		// that you'll get cache hits half of the time, so we just always query the dom for simplicity and code savings.
 		if (!(/** @type {Element} */ (target).querySelector('#' + css.hash))) {
 			const style = create_element('style');
-			// TODO: DOM access
 			style.id = css.hash;
 			set_text_content(style, css.code);
 
diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js
index 44b5e6d35e..e7150b6f13 100644
--- a/packages/svelte/src/internal/client/dom/elements/misc.js
+++ b/packages/svelte/src/internal/client/dom/elements/misc.js
@@ -45,7 +45,6 @@ export function add_form_reset_listener() {
 				// elements have not updated to their reset values yet
 				Promise.resolve().then(() => {
 					if (!evt.defaultPrevented) {
-						// TODO: DOM access
 						for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
 							// @ts-expect-error
 							e.__on_r?.();

From c322fdff2584e11bf550857f9709b9b7b70ea50e Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:19:46 +0200
Subject: [PATCH 36/88] fix: `validate_snippet_arguments`

---
 packages/svelte/src/internal/client/dev/validation.js     | 4 ++--
 .../samples/validate-snippet-args/_config.js              | 8 ++++++++
 .../samples/validate-snippet-args/main.svelte             | 5 +++++
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/validate-snippet-args/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/validate-snippet-args/main.svelte

diff --git a/packages/svelte/src/internal/client/dev/validation.js b/packages/svelte/src/internal/client/dev/validation.js
index 1fc4f3540e..ee27dbf70d 100644
--- a/packages/svelte/src/internal/client/dev/validation.js
+++ b/packages/svelte/src/internal/client/dev/validation.js
@@ -1,11 +1,11 @@
+import { renderer } from '../custom-renderer/state.js';
 import * as e from '../errors.js';
 /**
  * @param {Node} anchor
  * @param {...(()=>any)[]} args
  */
 export function validate_snippet_args(anchor, ...args) {
-	// TODO RENDERER: don't emit validate args for custom renderers
-	if (typeof anchor !== 'object' || !(anchor instanceof Node)) {
+	if (!renderer && (typeof anchor !== 'object' || !(anchor instanceof Node))) {
 		e.invalid_snippet_arguments();
 	}
 
diff --git a/packages/svelte/tests/custom-renderers/samples/validate-snippet-args/_config.js b/packages/svelte/tests/custom-renderers/samples/validate-snippet-args/_config.js
new file mode 100644
index 0000000000..d2a1910b71
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/validate-snippet-args/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	html: 'world'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/validate-snippet-args/main.svelte b/packages/svelte/tests/custom-renderers/samples/validate-snippet-args/main.svelte
new file mode 100644
index 0000000000..2ca772fea3
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/validate-snippet-args/main.svelte
@@ -0,0 +1,5 @@
+{#snippet greet(name)}
+	{name}
+{/snippet}
+
+{@render greet("world")}
\ No newline at end of file

From 13ae09b861a2f62ab75cafc054c246255b727266 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:26:24 +0200
Subject: [PATCH 37/88] fix: throw descriptive error if using
 `createRawSnippet` using custom renderer

---
 .../98-reference/.generated/client-errors.md     |  6 ++++++
 packages/svelte/messages/client-errors/errors.md |  4 ++++
 .../src/internal/client/dom/blocks/snippet.js    |  5 ++++-
 packages/svelte/src/internal/client/errors.js    | 16 ++++++++++++++++
 .../samples/raw-snippet/_config.js               |  5 +++++
 .../samples/raw-snippet/main.svelte              |  9 +++++++++
 6 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/raw-snippet/main.svelte

diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 7fccac5808..4c6361af46 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -197,6 +197,12 @@ Failed to hydrate the application
 Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
 ```
 
+### invalid_snippet_in_custom_renderer
+
+```
+`createRawSnippet` cannot be used with a custom renderer
+```
+
 ### lifecycle_legacy_only
 
 ```
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index 3f20cb989d..a047c04571 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -151,6 +151,10 @@ This can happen if you render a hydratable on the client that was not rendered o
 
 > Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
 
+## invalid_snippet_in_custom_renderer
+
+> `createRawSnippet` cannot be used with a custom renderer
+
 ## lifecycle_legacy_only
 
 > `%name%(...)` cannot be used in runes mode
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index 343d510e72..961a56acf7 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -16,6 +16,7 @@ import { DEV } from 'esm-env';
 import { get_first_child, get_next_sibling, insert_before, node_type } from '../operations.js';
 import { prevent_snippet_stringification } from '../../../shared/validate.js';
 import { BranchManager } from './branches.js';
+import { renderer } from '../../custom-renderer/state.js';
 
 /**
  * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
@@ -71,9 +72,11 @@ export function wrap_snippet(component, fn) {
  * @returns {Snippet<Params>}
  */
 export function createRawSnippet(fn) {
-	// TODO RENDERER: throw an error for createRawSnippet in a non-browser environment, as it relies on DOM APIs
 	// @ts-expect-error the types are a lie
 	return (/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
+		if (renderer != null) {
+			e.invalid_snippet_in_custom_renderer();
+		}
 		var snippet = fn(...params);
 
 		/** @type {Element} */
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index d60c2dd280..facfd18e26 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -361,6 +361,22 @@ export function invalid_snippet() {
 	}
 }
 
+/**
+ * `createRawSnippet` cannot be used with a custom renderer
+ * @returns {never}
+ */
+export function invalid_snippet_in_custom_renderer() {
+	if (DEV) {
+		const error = new Error(`invalid_snippet_in_custom_renderer\n\`createRawSnippet\` cannot be used with a custom renderer\nhttps://svelte.dev/e/invalid_snippet_in_custom_renderer`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/invalid_snippet_in_custom_renderer`);
+	}
+}
+
 /**
  * `%name%(...)` cannot be used in runes mode
  * @param {string} name
diff --git a/packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js b/packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js
new file mode 100644
index 0000000000..aa4c289bde
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	error: '`createRawSnippet` cannot be used with a custom renderer'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/raw-snippet/main.svelte b/packages/svelte/tests/custom-renderers/samples/raw-snippet/main.svelte
new file mode 100644
index 0000000000..e1cf5c9b19
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/raw-snippet/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { createRawSnippet } from 'svelte';
+
+	const snippet = createRawSnippet(() => ({
+		render: () => `<span>hello</span>`
+	}));
+</script>
+
+{@render snippet()}

From 8270a2fd555c85155edc4804d0519ff5f6fb21c8 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:41:14 +0200
Subject: [PATCH 38/88] fix: make sure returned elements are not primitives

---
 .../src/internal/client/custom-renderer/index.js | 16 ++++++++--------
 .../src/internal/client/custom-renderer/state.js |  6 +++---
 .../svelte/src/internal/client/dev/elements.js   |  1 -
 packages/svelte/types/index.d.ts                 |  4 ++--
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index d511d9a98e..b55dd707b7 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -3,10 +3,10 @@ import { branch, effect_root } from '../reactivity/effects.js';
 import { push_renderer } from './state.js';
 
 /**
- * @template [TFragment=any]
- * @template [TElement=any]
- * @template [TTextNode=any]
- * @template [TComment=any]
+ * @template {object} [TFragment=object]
+ * @template {object} [TElement=object]
+ * @template {object} [TTextNode=object]
+ * @template {object} [TComment=object]
  * @template [TNode=TFragment | TElement | TTextNode | TComment]
  * @typedef {Object} Renderer
  * @property {()=>TFragment} createFragment - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
@@ -31,10 +31,10 @@ import { push_renderer } from './state.js';
  */
 
 /**
- * @template [TFragment=unknown]
- * @template [TElement=unknown]
- * @template [TTextNode=unknown]
- * @template [TComment=unknown]
+ * @template {object} [TFragment=object]
+ * @template {object} [TElement=object]
+ * @template {object} [TTextNode=object]
+ * @template {object} [TComment=object]
  * @param {Renderer<TFragment, TElement, TTextNode, TComment>} renderer
  * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TFragment | TElement | TTextNode | TComment, props?: any }) => () => void }}
  */
diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 90e8f21372..60bee26fd3 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -3,12 +3,12 @@
  */
 
 /**
- * @type {Renderer | null}
+ * @type {Renderer<any, any, any, any> | null}
  */
 export let renderer = null;
 
 /**
- * @param {Renderer | null} $renderer
+ * @param {Renderer<any, any, any, any> | null} $renderer
  */
 export function set_renderer($renderer) {
 	renderer = $renderer;
@@ -16,7 +16,7 @@ export function set_renderer($renderer) {
 
 /**
  *
- * @param {Renderer} $renderer
+ * @param {Renderer<any, any, any, any>} $renderer
  */
 export function push_renderer($renderer) {
 	let old_renderer = renderer;
diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js
index c0a2c14a85..a9c6daf70e 100644
--- a/packages/svelte/src/internal/client/dev/elements.js
+++ b/packages/svelte/src/internal/client/dev/elements.js
@@ -34,7 +34,6 @@ export function add_locations(fn, filename, locations) {
  */
 function assign_location(element, filename, location) {
 	// @ts-expect-error
-	// TODO RENDERER: what if the element is not an object?
 	element.__svelte_meta = {
 		parent: dev_stack,
 		loc: { file: filename, line: location[0], column: location[1] }
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 46c984fb75..803f65181b 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2568,13 +2568,13 @@ declare module 'svelte/reactivity/window' {
 }
 
 declare module 'svelte/renderer' {
-	export function createRenderer<TFragment = unknown, TElement = unknown, TTextNode = unknown, TComment = unknown>(renderer: Renderer<TFragment, TElement, TTextNode, TComment>): Renderer<TFragment, TElement, TTextNode, TComment> & {
+	export function createRenderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object>(renderer: Renderer<TFragment, TElement, TTextNode, TComment>): Renderer<TFragment, TElement, TTextNode, TComment> & {
 		render: (Component: any, options: {
 			target: TFragment | TElement | TTextNode | TComment;
 			props?: any;
 		}) => () => void;
 	};
-	export type Renderer<TFragment = any, TElement = any, TTextNode = any, TComment = any, TNode = TFragment | TElement | TTextNode | TComment> = {
+	export type Renderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object, TNode = TFragment | TElement | TTextNode | TComment> = {
 		/**
 		 * - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
 		 */

From a0b60cb13712f5bf81204311bd831310df4f3727 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:53:21 +0200
Subject: [PATCH 39/88] fix: handle context withing `render`

---
 .../src/internal/client/custom-renderer/index.js       | 10 ++++++++--
 .../samples/context-from-render/_config.js             |  6 ++++++
 .../samples/context-from-render/main.svelte            |  7 +++++++
 .../custom-renderers/samples/context/Child.svelte      |  7 +++++++
 .../tests/custom-renderers/samples/context/_config.js  |  5 +++++
 .../tests/custom-renderers/samples/context/main.svelte | 10 ++++++++++
 packages/svelte/tests/custom-renderers/shared.ts       |  4 +++-
 7 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/context-from-render/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/context-from-render/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/context/Child.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples/context/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/context/main.svelte

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index b55dd707b7..f01f9b66d6 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -1,5 +1,7 @@
+/** @import { ComponentContext } from '#client' */
 import { boundary } from '../dom/blocks/boundary.js';
 import { branch, effect_root } from '../reactivity/effects.js';
+import { push, pop, component_context } from '../context.js';
 import { push_renderer } from './state.js';
 
 /**
@@ -36,7 +38,7 @@ import { push_renderer } from './state.js';
  * @template {object} [TTextNode=object]
  * @template {object} [TComment=object]
  * @param {Renderer<TFragment, TElement, TTextNode, TComment>} renderer
- * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TFragment | TElement | TTextNode | TComment, props?: any }) => () => void }}
+ * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TFragment | TElement | TTextNode | TComment, props?: any, context?: Map<any, any> }) => () => void }}
  */
 export function createRenderer(renderer) {
 	return {
@@ -45,15 +47,19 @@ export function createRenderer(renderer) {
 		 * @param {*} Component
 		 * @param {*} options
 		 */
-		render(Component, { target, props }) {
+		render(Component, { target, props, context }) {
 			var cleanup = push_renderer(renderer);
 			const unmount = effect_root(() => {
 				var anchor = renderer.createComment('');
 				renderer.insert(target, anchor, null);
 				boundary(/** @type {*} */ (anchor), { pending: () => {} }, (anchor) => {
+					push({});
+					var ctx = /** @type {ComponentContext} */ (component_context);
+					if (context) ctx.c = context;
 					branch(() => {
 						Component(anchor, props);
 					});
+					pop();
 				});
 			});
 			cleanup();
diff --git a/packages/svelte/tests/custom-renderers/samples/context-from-render/_config.js b/packages/svelte/tests/custom-renderers/samples/context-from-render/_config.js
new file mode 100644
index 0000000000..8a195e74c4
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/context-from-render/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<span>hello from render</span>',
+	context: new Map([['message', 'hello from render']])
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/context-from-render/main.svelte b/packages/svelte/tests/custom-renderers/samples/context-from-render/main.svelte
new file mode 100644
index 0000000000..22ee36eaa6
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/context-from-render/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const message = getContext('message');
+</script>
+
+<span>{message}</span>
diff --git a/packages/svelte/tests/custom-renderers/samples/context/Child.svelte b/packages/svelte/tests/custom-renderers/samples/context/Child.svelte
new file mode 100644
index 0000000000..22ee36eaa6
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/context/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const message = getContext('message');
+</script>
+
+<span>{message}</span>
diff --git a/packages/svelte/tests/custom-renderers/samples/context/_config.js b/packages/svelte/tests/custom-renderers/samples/context/_config.js
new file mode 100644
index 0000000000..1b24e41a08
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/context/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div><span>hello from context</span></div>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/context/main.svelte b/packages/svelte/tests/custom-renderers/samples/context/main.svelte
new file mode 100644
index 0000000000..a8dfae24bf
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/context/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { setContext } from 'svelte';
+	import Child from './Child.svelte';
+
+	setContext('message', 'hello from context');
+</script>
+
+<div>
+	<Child />
+</div>
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index 0f496257aa..80461521cf 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -11,6 +11,7 @@ export interface CustomRendererTest extends BaseTest {
 	html?: string;
 	compileOptions?: Partial<CompileOptions>;
 	props?: Record<string, any>;
+	context?: Map<any, any>;
 	error?: string;
 	compile_error?: string;
 	runtime_error?: string;
@@ -136,7 +137,8 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 		try {
 			unmount = renderer.render(mod.default, {
 				target,
-				props: config.props ?? {}
+				props: config.props ?? {},
+				context: config.context
 			});
 		} catch (err) {
 			if (config.error) {

From 61ea8e9f19378784f6642759ffb0d4ed7834236a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:55:34 +0200
Subject: [PATCH 40/88] chore: cleanup

---
 .../svelte/src/internal/client/dom/elements/misc.js   |  4 ++--
 packages/svelte/src/internal/client/dom/operations.js | 11 -----------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js
index e7150b6f13..69620cfff1 100644
--- a/packages/svelte/src/internal/client/dom/elements/misc.js
+++ b/packages/svelte/src/internal/client/dom/elements/misc.js
@@ -1,5 +1,5 @@
 import { hydrating } from '../hydration.js';
-import { clear_text_content, get_first_child, focus, add_event_listener } from '../operations.js';
+import { clear_text_content, get_first_child, add_event_listener } from '../operations.js';
 import { queue_micro_task } from '../task.js';
 
 /**
@@ -14,7 +14,7 @@ export function autofocus(dom, value) {
 
 		queue_micro_task(() => {
 			if (document.activeElement === body) {
-				focus(dom);
+				dom.focus();
 			}
 		});
 	}
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 0971410898..9aadb02734 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -788,14 +788,3 @@ export function class_list_toggle(element, name, force) {
 	}
 	element.classList.toggle(name, force);
 }
-
-/**
- * @param {HTMLElement} element
- */
-export function focus(element) {
-	if (renderer) {
-		// doesn't make sense with custom renderers
-		throw new Error('focus is not supported with custom renderers');
-	}
-	element.focus();
-}

From 206bdf42ed2ce1bfa2f9275e3193987eb82bbe83 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:57:52 +0200
Subject: [PATCH 41/88] fix: allow usage of `$props.id`

---
 .../svelte/src/internal/client/custom-renderer/state.js  | 3 +++
 packages/svelte/src/internal/client/dom/operations.js    | 9 ++++++++-
 packages/svelte/src/internal/client/dom/template.js      | 6 ++++--
 .../tests/custom-renderers/samples/props-id/_config.js   | 5 +++++
 .../tests/custom-renderers/samples/props-id/main.svelte  | 5 +++++
 5 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/props-id/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/props-id/main.svelte

diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 60bee26fd3..43d8cef47a 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -7,6 +7,9 @@
  */
 export let renderer = null;
 
+// to use with $props.id()
+export let custom_renderer_window = {};
+
 /**
  * @param {Renderer<any, any, any, any> | null} $renderer
  */
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 9aadb02734..b5acb544bf 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -13,7 +13,7 @@ import {
 } from '#client/constants';
 import { eager_block_effects } from '../reactivity/batch.js';
 import { NAMESPACE_HTML } from '../../../constants.js';
-import { renderer } from '../custom-renderer/state.js';
+import { custom_renderer_window, renderer } from '../custom-renderer/state.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -788,3 +788,10 @@ export function class_list_toggle(element, name, force) {
 	}
 	element.classList.toggle(name, force);
 }
+
+export function get_window() {
+	if (renderer) {
+		return custom_renderer_window;
+	}
+	return window;
+}
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index c8744d7fb1..a099b7ccb5 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -20,7 +20,8 @@ import {
 	replace_with,
 	node_type,
 	get_node_value,
-	node_name
+	node_name,
+	get_window
 } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.js';
@@ -417,7 +418,8 @@ export function props_id() {
 		return id;
 	}
 
-	// TODO RENDERER: figure out what to do here
+	let window = get_window();
+
 	// @ts-expect-error This way we ensure the id is unique even across Svelte runtimes
 	(window.__svelte ??= {}).uid ??= 1;
 
diff --git a/packages/svelte/tests/custom-renderers/samples/props-id/_config.js b/packages/svelte/tests/custom-renderers/samples/props-id/_config.js
new file mode 100644
index 0000000000..904e7498a8
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/props-id/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'c1'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte b/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte
new file mode 100644
index 0000000000..bbed82af1e
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+{id}
\ No newline at end of file

From 1270d5d43418a9894c2f172716c73c73875a5e8c Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 10:58:37 +0200
Subject: [PATCH 42/88] chore: cleanup

---
 packages/svelte/src/internal/client/dev/elements.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js
index a9c6daf70e..8c6f382e31 100644
--- a/packages/svelte/src/internal/client/dev/elements.js
+++ b/packages/svelte/src/internal/client/dev/elements.js
@@ -15,7 +15,6 @@ export function add_locations(fn, filename, locations) {
 	return (/** @type {any[]} */ ...args) => {
 		const dom = fn(...args);
 
-		// check here
 		var node = hydrating
 			? dom
 			: node_type(dom) === DOCUMENT_FRAGMENT_NODE

From c573720d394b4d97c429d443df9e87bfd455f8e2 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 11:55:55 +0200
Subject: [PATCH 43/88] chore: better types

---
 .../internal/client/custom-renderer/index.js  |  12 +-
 packages/svelte/types/index.d.ts              | 209 +++++++++++++++++-
 2 files changed, 214 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index f01f9b66d6..728918b856 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -1,4 +1,5 @@
 /** @import { ComponentContext } from '#client' */
+/** @import { Component, ComponentType, SvelteComponent } from '../../../index.js' */
 import { boundary } from '../dom/blocks/boundary.js';
 import { branch, effect_root } from '../reactivity/effects.js';
 import { push, pop, component_context } from '../context.js';
@@ -38,26 +39,27 @@ import { push_renderer } from './state.js';
  * @template {object} [TTextNode=object]
  * @template {object} [TComment=object]
  * @param {Renderer<TFragment, TElement, TTextNode, TComment>} renderer
- * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: (Component: any, options: { target: TFragment | TElement | TTextNode | TComment, props?: any, context?: Map<any, any> }) => () => void }}
+ * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: <Props extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, any, any>, options: {} extends Props ? { target: TFragment | TElement | TTextNode | TComment, props?: Props, context?: Map<any, any> } : { target: TFragment | TElement | TTextNode | TComment, props: Props, context?: Map<any, any> }) => () => void }}
  */
 export function createRenderer(renderer) {
 	return {
 		...renderer,
 		/**
-		 * @param {*} Component
-		 * @param {*} options
+		 * @template {Record<string, any>} Props
+		 * @param {ComponentType<SvelteComponent<Props>> | Component<Props, any, any>} Component
+		 * @param {{} extends Props ? { target: TFragment | TElement | TTextNode | TComment, props?: Props, context?: Map<any, any> } : { target: TFragment | TElement | TTextNode | TComment, props: Props, context?: Map<any, any> }} options
 		 */
 		render(Component, { target, props, context }) {
 			var cleanup = push_renderer(renderer);
 			const unmount = effect_root(() => {
 				var anchor = renderer.createComment('');
-				renderer.insert(target, anchor, null);
+				renderer.insert(/** @type {*} */ (target), anchor, null);
 				boundary(/** @type {*} */ (anchor), { pending: () => {} }, (anchor) => {
 					push({});
 					var ctx = /** @type {ComponentContext} */ (component_context);
 					if (context) ctx.c = context;
 					branch(() => {
-						Component(anchor, props);
+						/** @type {Function} */ (Component)(anchor, props);
 					});
 					pop();
 				});
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 803f65181b..b455b92893 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2569,9 +2569,14 @@ declare module 'svelte/reactivity/window' {
 
 declare module 'svelte/renderer' {
 	export function createRenderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object>(renderer: Renderer<TFragment, TElement, TTextNode, TComment>): Renderer<TFragment, TElement, TTextNode, TComment> & {
-		render: (Component: any, options: {
+		render: <Props extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, any, any>, options: {} extends Props ? {
 			target: TFragment | TElement | TTextNode | TComment;
-			props?: any;
+			props?: Props;
+			context?: Map<any, any>;
+		} : {
+			target: TFragment | TElement | TTextNode | TComment;
+			props: Props;
+			context?: Map<any, any>;
 		}) => () => void;
 	};
 	export type Renderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object, TNode = TFragment | TElement | TTextNode | TComment> = {
@@ -2652,6 +2657,206 @@ declare module 'svelte/renderer' {
 		 */
 		removeEventListener: (target: TNode, type: string, handler: any, options?: any) => void;
 	};
+	/**
+	 * @deprecated In Svelte 4, components are classes. In Svelte 5, they are functions.
+	 * Use `mount` instead to instantiate components.
+	 * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+	 * for more info.
+	 */
+	interface ComponentConstructorOptions<
+		Props extends Record<string, any> = Record<string, any>
+	> {
+		target: Element | Document | ShadowRoot;
+		anchor?: Element;
+		props?: Props;
+		context?: Map<any, any>;
+		hydrate?: boolean;
+		intro?: boolean;
+		recover?: boolean;
+		sync?: boolean;
+		idPrefix?: string;
+		$$inline?: boolean;
+		transformError?: (error: unknown) => unknown;
+	}
+
+	/**
+	 * Utility type for ensuring backwards compatibility on a type level that if there's a default slot, add 'children' to the props
+	 */
+	type Properties<Props, Slots> = Props &
+		(Slots extends { default: any }
+			? // This is unfortunate because it means "accepts no props" turns into "accepts any prop"
+				// but the alternative is non-fixable type errors because of the way TypeScript index
+				// signatures work (they will always take precedence and make an impossible-to-satisfy children type).
+				Props extends Record<string, never>
+				? any
+				: { children?: any }
+			: {});
+
+	/**
+	 * This was the base class for Svelte components in Svelte 4. Svelte 5+ components
+	 * are completely different under the hood. For typing, use `Component` instead.
+	 * To instantiate components, use `mount` instead.
+	 * See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
+	 */
+	class SvelteComponent<
+		Props extends Record<string, any> = Record<string, any>,
+		Events extends Record<string, any> = any,
+		Slots extends Record<string, any> = any
+	> {
+		/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+		static element?: typeof HTMLElement;
+
+		[prop: string]: any;
+		/**
+		 * @deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which
+		 * is a stop-gap solution. Migrate towards using `mount` instead. See
+		 * [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.
+		 */
+		constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);
+		/**
+		 * For type checking capabilities only.
+		 * Does not exist at runtime.
+		 * ### DO NOT USE!
+		 */
+		$$prop_def: Props; // Without Properties: unnecessary, causes type bugs
+		/**
+		 * For type checking capabilities only.
+		 * Does not exist at runtime.
+		 * ### DO NOT USE!
+		 */
+		$$events_def: Events;
+		/**
+		 * For type checking capabilities only.
+		 * Does not exist at runtime.
+		 * ### DO NOT USE!
+		 */
+		$$slot_def: Slots;
+		/**
+		 * For type checking capabilities only.
+		 * Does not exist at runtime.
+		 * ### DO NOT USE!
+		 */
+		$$bindings?: string;
+
+		/**
+		 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+		 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+		 * for more info.
+		 */
+		$destroy(): void;
+
+		/**
+		 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+		 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+		 * for more info.
+		 */
+		$on<K extends Extract<keyof Events, string>>(
+			type: K,
+			callback: (e: Events[K]) => void
+		): () => void;
+
+		/**
+		 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+		 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+		 * for more info.
+		 */
+		$set(props: Partial<Props>): void;
+	}
+
+	const brand: unique symbol;
+	type Brand<B> = { [brand]: B };
+	type Branded<T, B> = T & Brand<B>;
+
+	/**
+	 * Internal implementation details that vary between environments
+	 */
+	type ComponentInternals = Branded<{}, 'ComponentInternals'>;
+
+	/**
+	 * Can be used to create strongly typed Svelte components.
+	 *
+	 * #### Example:
+	 *
+	 * You have component library on npm called `component-library`, from which
+	 * you export a component called `MyComponent`. For Svelte+TypeScript users,
+	 * you want to provide typings. Therefore you create a `index.d.ts`:
+	 * ```ts
+	 * import type { Component } from 'svelte';
+	 * export declare const MyComponent: Component<{ foo: string }> {}
+	 * ```
+	 * Typing this makes it possible for IDEs like VS Code with the Svelte extension
+	 * to provide intellisense and to use the component like this in a Svelte file
+	 * with TypeScript:
+	 * ```svelte
+	 * <script lang="ts">
+	 * 	import { MyComponent } from "component-library";
+	 * </script>
+	 * <MyComponent foo={'bar'} />
+	 * ```
+	 */
+	interface Component<
+		Props extends Record<string, any> = {},
+		Exports extends Record<string, any> = {},
+		Bindings extends keyof Props | '' = string
+	> {
+		/**
+		 * @param internal An internal object used by Svelte. Do not use or modify.
+		 * @param props The props passed to the component.
+		 */
+		(
+			this: void,
+			internals: ComponentInternals,
+			props: Props
+		): {
+			/**
+			 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+			 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+			 * for more info.
+			 */
+			$on?(type: string, callback: (e: any) => void): () => void;
+			/**
+			 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
+			 * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
+			 * for more info.
+			 */
+			$set?(props: Partial<Props>): void;
+		} & Exports;
+		/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+		element?: typeof HTMLElement;
+		/** Does not exist at runtime, for typing capabilities only. DO NOT USE */
+		z_$$bindings?: Bindings;
+	}
+
+	/**
+	 * @deprecated This type is obsolete when working with the new `Component` type.
+	 *
+	 * @description
+	 * Convenience type to get the type of a Svelte component. Useful for example in combination with
+	 * dynamic components using `<svelte:component>`.
+	 *
+	 * Example:
+	 * ```html
+	 * <script lang="ts">
+	 * 	import type { ComponentType, SvelteComponent } from 'svelte';
+	 * 	import Component1 from './Component1.svelte';
+	 * 	import Component2 from './Component2.svelte';
+	 *
+	 * 	const component: ComponentType = someLogic() ? Component1 : Component2;
+	 * 	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
+	 * </script>
+	 *
+	 * <svelte:component this={component} />
+	 * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
+	 * ```
+	 */
+	type ComponentType<Comp extends SvelteComponent = SvelteComponent> = (new (
+		options: ComponentConstructorOptions<
+			Comp extends SvelteComponent<infer Props> ? Props : Record<string, any>
+		>
+	) => Comp) & {
+		/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+		element?: typeof HTMLElement;
+	};
 
 	export {};
 }

From 700454d77c2bda2b7a645b41cc188e933507da52 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 12:12:37 +0200
Subject: [PATCH 44/88] fix: lint

---
 packages/svelte/package.json                 |  2 +-
 packages/svelte/scripts/generate-types.js    | 11 ++++++++++-
 packages/svelte/src/internal/client/index.js |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9857eeb41d..14aaf7856e 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -91,7 +91,7 @@
       "types": "./types/index.d.ts",
       "default": "./src/reactivity/window/index.js"
     },
-	"./renderer": {
+    "./renderer": {
       "types": "./types/index.d.ts",
       "default": "./src/renderer/index.js"
     },
diff --git a/packages/svelte/scripts/generate-types.js b/packages/svelte/scripts/generate-types.js
index bdbde7a505..77d3c0718a 100644
--- a/packages/svelte/scripts/generate-types.js
+++ b/packages/svelte/scripts/generate-types.js
@@ -8,7 +8,16 @@ const pkg = JSON.parse(fs.readFileSync(`${dir}/package.json`, 'utf-8'));
 
 // For people not using moduleResolution: 'bundler', we need to generate these files. Think about removing this in Svelte 6 or 7
 // It may look weird, but the imports MUST be ending with index.js to be properly resolved in all TS modes
-for (const name of ['action', 'animate', 'easing', 'motion', 'store', 'transition', 'legacy', 'renderer']) {
+for (const name of [
+	'action',
+	'animate',
+	'easing',
+	'motion',
+	'store',
+	'transition',
+	'legacy',
+	'renderer'
+]) {
 	fs.writeFileSync(`${dir}/${name}.d.ts`, "import './types/index.js';\n");
 }
 
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 97f891058d..436240ce7a 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -181,4 +181,4 @@ export {
 export { strict_equals, equals } from './dev/equality.js';
 export { log_if_contains_state } from './dev/console-log.js';
 export { invoke_error_boundary } from './error-handling.js';
-export { push_renderer } from "./custom-renderer/state.js"
\ No newline at end of file
+export { push_renderer } from './custom-renderer/state.js';

From a0650d06114a1686edafd949f2c89cc020c72dd2 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 13:23:30 +0200
Subject: [PATCH 45/88] fix: events don't go through propagation

---
 .../internal/client/dom/elements/events.js    | 11 +++++++++
 .../event-handler-no-propagation/_config.js   | 24 +++++++++++++++++++
 .../event-handler-no-propagation/main.svelte  |  7 ++++++
 3 files changed, 42 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index 23022170eb..58217a7b9d 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -63,10 +63,21 @@ export function replay_events(dom) {
  * @param {AddEventListenerOptions} [options]
  */
 export function create_event(event_name, dom, handler, options = {}) {
+	// Capture whether a custom renderer is active at creation time (during mount),
+	// since `renderer` will be null when the event actually fires
+	var is_custom_renderer = renderer != null;
+
 	/**
 	 * @this {EventTarget}
 	 */
 	function target_handler(/** @type {Event} */ event) {
+		if (is_custom_renderer) {
+			// Custom renderers don't use DOM event propagation/delegation,
+			// so just call the handler directly
+			return without_reactive_context(() => {
+				return handler?.call(this, event);
+			});
+		}
 		if (!options.capture) {
 			// Only call in the bubble phase, else delegated events would be called before the capturing events
 			handle_event_propagation.call(dom, event);
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js
new file mode 100644
index 0000000000..b902b602e6
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, serialize, logs }) {
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		const listeners = button.listeners?.click;
+		assert.ok(listeners, 'button should have click listeners');
+
+		// Call the handler with a plain object that is NOT a DOM Event.
+		// If handle_event_propagation is called, it will fail because
+		// it tries to access DOM-specific properties like composedPath, ownerDocument, etc.
+		for (const { handler } of listeners) {
+			handler.call(button, { type: 'click' });
+		}
+		flushSync();
+
+		assert.deepEqual(logs, [{ type: 'click' }]);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte
new file mode 100644
index 0000000000..c5c7626fb2
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	function increment(e) {
+		console.log(e);
+	}
+</script>
+
+<button onclick={increment}>log</button>

From e2cedcd93e520cce8d82176bbe0b42ad7defccc9 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 13:52:37 +0200
Subject: [PATCH 46/88] fix: don't lowercase attributes with custom renderers

---
 .../client/transform-template/template.js     |  2 +-
 .../client/visitors/RegularElement.js         |  2 +-
 .../client/visitors/shared/element.js         |  5 ++-
 .../src/internal/client/dom/operations.js     |  6 +--
 .../samples/attribute-casing/_config.js       | 37 +++++++++++++++++++
 .../samples/attribute-casing/main.svelte      |  9 +++++
 .../samples/special-attributes/_config.js     | 16 ++++----
 7 files changed, 62 insertions(+), 15 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/attribute-casing/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/attribute-casing/main.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
index f546ce4962..e181419a9e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
@@ -137,7 +137,7 @@ function objectify(item) {
 		attributes.properties.push(
 			b.prop(
 				'init',
-				b.key(fix_attribute_casing(key)),
+				b.key(item.is_html ? fix_attribute_casing(key) : key),
 				value === undefined ? b.void0 : b.literal(value)
 			)
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 468eadca87..5a74f5a115 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -235,7 +235,7 @@ export function RegularElement(node, context) {
 				continue;
 			}
 
-			const name = get_attribute_name(node, attribute);
+			const name = get_attribute_name(node, attribute, !!context.state.analysis.custom_renderer);
 
 			if (
 				!is_custom_element &&
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index 58ed88855f..d2d14d7da1 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -132,9 +132,10 @@ export function build_attribute_value(value, context, memoize = (value) => value
 /**
  * @param {AST.RegularElement | AST.SvelteElement} element
  * @param {AST.Attribute} attribute
+ * @param {boolean} [custom_renderer]
  */
-export function get_attribute_name(element, attribute) {
-	if (!element.metadata.svg && !element.metadata.mathml) {
+export function get_attribute_name(element, attribute, custom_renderer) {
+	if (!custom_renderer && !element.metadata.svg && !element.metadata.mathml) {
 		return normalize_attribute(attribute.name);
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index b5acb544bf..4539d12af5 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -579,7 +579,7 @@ export function set_element_checked(element, checked) {
  */
 export function set_element_default_value(element, value) {
 	if (renderer) {
-		renderer.setAttribute(element, 'defaultvalue', value);
+		renderer.setAttribute(element, 'defaultValue', value);
 		return;
 	}
 	// @ts-expect-error
@@ -599,9 +599,9 @@ export function set_element_default_value(element, value) {
 export function set_element_default_checked(element, checked) {
 	if (renderer) {
 		if (checked) {
-			renderer.setAttribute(element, 'defaultchecked', '');
+			renderer.setAttribute(element, 'defaultChecked', '');
 		} else {
-			renderer.removeAttribute(element, 'defaultchecked');
+			renderer.removeAttribute(element, 'defaultChecked');
 		}
 		return;
 	}
diff --git a/packages/svelte/tests/custom-renderers/samples/attribute-casing/_config.js b/packages/svelte/tests/custom-renderers/samples/attribute-casing/_config.js
new file mode 100644
index 0000000000..a44fc4ae1f
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/attribute-casing/_config.js
@@ -0,0 +1,37 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const elements = target.children.filter((/** @type {any} */ n) => n.type === 'element');
+
+		assert.equal(elements.length, 4);
+
+		// Static camelCase attribute should preserve casing
+		const div1 = elements[0];
+		assert.equal(div1.name, 'div');
+		assert.equal(div1.attributes['dataColor'], 'red');
+		// Should NOT have a lowercased version
+		assert.equal(div1.attributes['datacolor'], undefined);
+
+		// Dynamic camelCase attribute should preserve casing
+		const div2 = elements[1];
+		assert.equal(div2.name, 'div');
+		assert.equal(div2.attributes['viewBox'], '0 0 100 100');
+		// Should NOT have a lowercased version
+		assert.equal(div2.attributes['viewbox'], undefined);
+
+		// Static tabIndex should preserve casing
+		const span = elements[2];
+		assert.equal(span.name, 'span');
+		assert.equal(span.attributes['tabIndex'], '0');
+		// Should NOT have a lowercased version
+		assert.equal(span.attributes['tabindex'], undefined);
+
+		// Spread camelCase attributes should preserve casing
+		const p = elements[3];
+		assert.equal(p.name, 'p');
+		assert.equal(p.attributes['dataValue'], 'spread');
+		// Should NOT have a lowercased version
+		assert.equal(p.attributes['datavalue'], undefined);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/attribute-casing/main.svelte b/packages/svelte/tests/custom-renderers/samples/attribute-casing/main.svelte
new file mode 100644
index 0000000000..ef6e7f2907
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/attribute-casing/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let box = $state('0 0 100 100');
+	let spread = $derived({ dataValue: 'spread', onClick: () => {} });
+</script>
+
+<div dataColor="red">static camelCase</div>
+<div viewBox={box}>dynamic camelCase</div>
+<span tabIndex="0">static tabIndex</span>
+<p {...spread}>spread camelCase</p>
diff --git a/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
index 34ff2fe38c..4b839e5ad2 100644
--- a/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
@@ -27,16 +27,16 @@ export default test({
 		assert.equal(input_checked.attributes['type'], 'checkbox');
 		assert.equal(input_checked.attributes['checked'], '');
 
-		// Input 3: value="fixed" defaultvalue="default_val"
+		// Input 3: value="fixed" defaultValue="default_val"
 		const input_default_value = inputs[2];
 		assert.equal(input_default_value.attributes['value'], 'fixed');
-		assert.equal(input_default_value.attributes['defaultvalue'], 'default_val');
+		assert.equal(input_default_value.attributes['defaultValue'], 'default_val');
 
-		// Input 4: type="checkbox" checked="" defaultchecked=""
+		// Input 4: type="checkbox" checked="" defaultChecked=""
 		const input_default_checked = inputs[3];
 		assert.equal(input_default_checked.attributes['type'], 'checkbox');
 		assert.equal(input_default_checked.attributes['checked'], '');
-		assert.equal(input_default_checked.attributes['defaultchecked'], '');
+		assert.equal(input_default_checked.attributes['defaultChecked'], '');
 
 		// Input 5: spread attributes
 		const input_spread = inputs[4];
@@ -56,12 +56,12 @@ export default test({
 		// Input 2: checked should be removed
 		assert.equal(input_checked.attributes['checked'], undefined);
 
-		// Input 3: defaultvalue="new_default", value still "fixed"
+		// Input 3: defaultValue="new_default", value still "fixed"
 		assert.equal(input_default_value.attributes['value'], 'fixed');
-		assert.equal(input_default_value.attributes['defaultvalue'], 'new_default');
+		assert.equal(input_default_value.attributes['defaultValue'], 'new_default');
 
-		// Input 4: defaultchecked should be removed
-		assert.equal(input_default_checked.attributes['defaultchecked'], undefined);
+		// Input 4: defaultChecked should be removed
+		assert.equal(input_default_checked.attributes['defaultChecked'], undefined);
 
 		// Input 5: spread attributes should update value to "world"
 		assert.equal(input_spread.attributes['value'], 'world');

From e0a5e4fa35ea19350960a0f1110d826bf80f47a1 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 31 Mar 2026 14:47:53 +0200
Subject: [PATCH 47/88] fix: pass all the args to custom renderer events

---
 .../svelte/src/internal/client/dom/elements/events.js  |  6 ++++--
 .../samples/event-handler-no-propagation/_config.js    | 10 +++++-----
 .../samples/event-handler-no-propagation/main.svelte   |  4 ++--
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index 58217a7b9d..e662101621 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -69,15 +69,17 @@ export function create_event(event_name, dom, handler, options = {}) {
 
 	/**
 	 * @this {EventTarget}
+	 * @param  {...any} args
 	 */
-	function target_handler(/** @type {Event} */ event) {
+	function target_handler(...args) {
 		if (is_custom_renderer) {
 			// Custom renderers don't use DOM event propagation/delegation,
 			// so just call the handler directly
 			return without_reactive_context(() => {
-				return handler?.call(this, event);
+				return handler?.apply(this, /** @type {any} */ (args));
 			});
 		}
+		var event = /** @type {Event} */ (args[0]);
 		if (!options.capture) {
 			// Only call in the bubble phase, else delegated events would be called before the capturing events
 			handle_event_propagation.call(dom, event);
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js
index b902b602e6..085ca682d8 100644
--- a/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/_config.js
@@ -11,14 +11,14 @@ export default test({
 		const listeners = button.listeners?.click;
 		assert.ok(listeners, 'button should have click listeners');
 
-		// Call the handler with a plain object that is NOT a DOM Event.
-		// If handle_event_propagation is called, it will fail because
-		// it tries to access DOM-specific properties like composedPath, ownerDocument, etc.
+		// Call the handler with multiple arguments.
+		// Custom renderers may pass multiple arguments to event handlers,
+		// so we need to make sure all arguments are forwarded.
 		for (const { handler } of listeners) {
-			handler.call(button, { type: 'click' });
+			handler.call(button, { type: 'click' }, 'extra', 42);
 		}
 		flushSync();
 
-		assert.deepEqual(logs, [{ type: 'click' }]);
+		assert.deepEqual(logs, [{ type: 'click' }, 'extra', 42]);
 	}
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte
index c5c7626fb2..67a6e6ce92 100644
--- a/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler-no-propagation/main.svelte
@@ -1,6 +1,6 @@
 <script>
-	function increment(e) {
-		console.log(e);
+	function increment(...args) {
+		console.log(...args);
 	}
 </script>
 

From d9a5f167f24e4f725c6b71a871bbed78db4170e2 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Wed, 1 Apr 2026 12:00:56 +0200
Subject: [PATCH 48/88] fix: import

---
 packages/svelte/src/internal/client/dev/css.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/dev/css.js b/packages/svelte/src/internal/client/dev/css.js
index cc868e92fa..0875cf2ba2 100644
--- a/packages/svelte/src/internal/client/dev/css.js
+++ b/packages/svelte/src/internal/client/dev/css.js
@@ -1,4 +1,4 @@
-import { remove_node } from '../dom/operations';
+import { remove_node } from '../dom/operations.js';
 
 /** @type {Map<String, Set<HTMLStyleElement>>} */
 var all_styles = new Map();

From 65b23d19fbe54fbfc94557bca6bd40af883651a4 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Wed, 1 Apr 2026 12:09:22 +0200
Subject: [PATCH 49/88] fix: options in migrate

---
 packages/svelte/src/compiler/migrate/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 0370155c12..10a0274b30 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -149,7 +149,8 @@ export function migrate(source, { filename, use_ts } = {}) {
 			css: 'css' in parsed_options ? () => parsed_options.css ?? 'external' : () => 'external',
 			runes: 'runes' in parsed_options ? () => parsed_options.runes : () => undefined,
 			experimental: {
-				async: true
+				async: true,
+				customRenderer: () => undefined
 			}
 		};
 

From 02d23d1bf02d4be42315f98428dadf618ac05fe7 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Wed, 1 Apr 2026 13:35:40 +0200
Subject: [PATCH 50/88] fix: class toggle

---
 .../src/internal/client/dom/operations.js     |  4 +--
 .../samples/class-directive/_config.js        | 27 +++++++++++++++++++
 .../samples/class-directive/main.svelte       |  6 +++++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/class-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 4539d12af5..fe9fbb4eda 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -770,7 +770,7 @@ export function set_css_text(element, value) {
  */
 export function class_list_toggle(element, name, force) {
 	if (renderer) {
-		const classes = element.getAttribute('class')?.split(/\s+/) ?? [];
+		const classes = renderer.getAttribute(element, 'class')?.split(/\s+/) ?? [];
 		const has_class = classes.includes(name);
 		if (force === has_class) {
 			return;
@@ -783,7 +783,7 @@ export function class_list_toggle(element, name, force) {
 				classes.splice(index, 1);
 			}
 		}
-		element.setAttribute('class', classes.join(' '));
+		renderer.setAttribute(element, 'class', classes.join(' '));
 		return;
 	}
 	element.classList.toggle(name, force);
diff --git a/packages/svelte/tests/custom-renderers/samples/class-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/class-directive/_config.js
new file mode 100644
index 0000000000..b34ad3dc62
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/class-directive/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<div class="base">content</div> <button>toggle</button>',
+	test({ assert, target, serialize, dispatch_event }) {
+		const button = target.children.find(
+			(/**@type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		// Click to add the "active" class
+		dispatch_event(button, 'click');
+		flushSync();
+
+		assert.equal(
+			serialize(target),
+			'<div class="base active">content</div> <button>toggle</button>'
+		);
+
+		// Click again to remove the "active" class
+		dispatch_event(button, 'click');
+		flushSync();
+
+		assert.equal(serialize(target), '<div class="base">content</div> <button>toggle</button>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte
new file mode 100644
index 0000000000..6335828e9c
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let active = $state(false);
+</script>
+
+<div class="base" class:active>content</div>
+<button onclick={() => active = !active}>toggle</button>

From 8c70351882093bb5c476316d72529a2e1aab2bb9 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Wed, 1 Apr 2026 13:36:28 +0200
Subject: [PATCH 51/88] chore: changeset

---
 .changeset/salty-steaks-wash.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/salty-steaks-wash.md

diff --git a/.changeset/salty-steaks-wash.md b/.changeset/salty-steaks-wash.md
new file mode 100644
index 0000000000..393f463644
--- /dev/null
+++ b/.changeset/salty-steaks-wash.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: custom renderer api

From 5c0e54ecff460ef9764ab8decbd381db7d0de337 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 09:18:23 +0200
Subject: [PATCH 52/88] fix: skip microtask in custom renderer `create_event`

---
 packages/svelte/src/internal/client/dom/elements/events.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index e662101621..aaababd9a6 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -96,9 +96,8 @@ export function create_event(event_name, dom, handler, options = {}) {
 	// defer the attachment till after it's been appended to the document. TODO: remove this once Chrome fixes
 	// this bug. The same applies to wheel events and touch events.
 	if (
-		event_name.startsWith('pointer') ||
-		event_name.startsWith('touch') ||
-		event_name === 'wheel'
+		!is_custom_renderer &&
+		(event_name.startsWith('pointer') || event_name.startsWith('touch') || event_name === 'wheel')
 	) {
 		queue_micro_task(() => {
 			add_event_listener(dom, event_name, target_handler, options);

From 9ccd0b4e08c9c21b6be925b931be1ff77414599b Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 09:22:08 +0200
Subject: [PATCH 53/88] fix: cleanup in `finally`

---
 .../internal/client/custom-renderer/index.js  | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index 728918b856..f3df528411 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -51,21 +51,24 @@ export function createRenderer(renderer) {
 		 */
 		render(Component, { target, props, context }) {
 			var cleanup = push_renderer(renderer);
-			const unmount = effect_root(() => {
-				var anchor = renderer.createComment('');
-				renderer.insert(/** @type {*} */ (target), anchor, null);
-				boundary(/** @type {*} */ (anchor), { pending: () => {} }, (anchor) => {
-					push({});
-					var ctx = /** @type {ComponentContext} */ (component_context);
-					if (context) ctx.c = context;
-					branch(() => {
-						/** @type {Function} */ (Component)(anchor, props);
+			try {
+				const unmount = effect_root(() => {
+					var anchor = renderer.createComment('');
+					renderer.insert(/** @type {*} */ (target), anchor, null);
+					boundary(/** @type {*} */ (anchor), { pending: () => {} }, (anchor) => {
+						push({});
+						var ctx = /** @type {ComponentContext} */ (component_context);
+						if (context) ctx.c = context;
+						branch(() => {
+							/** @type {Function} */ (Component)(anchor, props);
+						});
+						pop();
 					});
-					pop();
 				});
-			});
-			cleanup();
-			return unmount;
+				return unmount;
+			} finally {
+				cleanup();
+			}
 		}
 	};
 }

From 020dc9e1bb8fd6812b8c6eb71b307e965dd9ece4 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 09:25:37 +0200
Subject: [PATCH 54/88] fix: disable `@html` in custom renderer

---
 .../svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js | 4 ++++
 .../tests/custom-renderers/samples/html-tag/_config.js       | 5 +++++
 .../tests/custom-renderers/samples/html-tag/main.svelte      | 1 +
 3 files changed, 10 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/html-tag/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/html-tag/main.svelte

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
index 7b0e501760..f5ba9cd3d3 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
@@ -2,12 +2,16 @@
 /** @import { Context } from '../types' */
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_opening_tag } from './shared/utils.js';
+import * as e from '../../../errors.js';
 
 /**
  * @param {AST.HtmlTag} node
  * @param {Context} context
  */
 export function HtmlTag(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`@html`');
+	}
 	if (context.state.analysis.runes) {
 		validate_opening_tag(node, context.state, '@');
 	}
diff --git a/packages/svelte/tests/custom-renderers/samples/html-tag/_config.js b/packages/svelte/tests/custom-renderers/samples/html-tag/_config.js
new file mode 100644
index 0000000000..e00a19bcfc
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/html-tag/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`@html` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/html-tag/main.svelte b/packages/svelte/tests/custom-renderers/samples/html-tag/main.svelte
new file mode 100644
index 0000000000..7360363916
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/html-tag/main.svelte
@@ -0,0 +1 @@
+{@html ""}
\ No newline at end of file

From 37bf4452f59443a3c17a8d61157574380bc50023 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 09:30:25 +0200
Subject: [PATCH 55/88] fix: event listeners in spread

---
 .../client/dom/elements/attributes.js         |  8 ++---
 .../samples/event-handler-spread/_config.js   | 29 +++++++++++++++++++
 .../samples/event-handler-spread/main.svelte  | 13 +++++++++
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/event-handler-spread/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/event-handler-spread/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index ab34fe98d2..e1c3d805dc 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -395,7 +395,7 @@ function set_attributes(
 			const opts = {};
 			const event_handle_key = '$$' + key;
 			let event_name = key.slice(2);
-			var is_delegated = can_delegate_event(event_name);
+			var is_delegated = renderer == null && can_delegate_event(event_name);
 
 			if (is_capture_event(event_name)) {
 				event_name = event_name.slice(0, -7);
@@ -419,10 +419,10 @@ function set_attributes(
 			} else if (value != null) {
 				/**
 				 * @this {any}
-				 * @param {Event} evt
+				 * @param {...any} args
 				 */
-				function handle(evt) {
-					current[key].call(this, evt);
+				function handle(...args) {
+					current[key].apply(this, args);
 				}
 
 				current[event_handle_key] = create_event(event_name, element, handle, opts);
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler-spread/_config.js b/packages/svelte/tests/custom-renderers/samples/event-handler-spread/_config.js
new file mode 100644
index 0000000000..ebcd14cc16
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler-spread/_config.js
@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>click me</button> <p>0</p>',
+	test({ assert, target, serialize, logs }) {
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		const listeners = button.listeners?.click;
+		assert.ok(listeners, 'button should have click listeners');
+
+		// Call the handler with multiple arguments.
+		// Custom renderers may pass multiple arguments to event handlers,
+		// so we need to make sure all arguments are forwarded through spreads too.
+		for (const { handler } of listeners) {
+			handler.call(button, { type: 'click' }, 'extra', 42);
+		}
+		flushSync();
+
+		const html = serialize(target);
+		assert.equal(html, '<button>click me</button> <p>1</p>');
+
+		// Verify all arguments were forwarded to the actual handler
+		assert.deepEqual(logs, [{ type: 'click' }, 'extra', 42]);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/event-handler-spread/main.svelte b/packages/svelte/tests/custom-renderers/samples/event-handler-spread/main.svelte
new file mode 100644
index 0000000000..eed8edde6f
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/event-handler-spread/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	const spread = {
+		onclick(...args) {
+			count++;
+			console.log(...args);
+		}
+	};
+</script>
+
+<button {...spread}>click me</button>
+<p>{count}</p>

From 8f8ac035cf33a8515254e9033fc06e6a85dfc896 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 09:36:51 +0200
Subject: [PATCH 56/88] fix: special value handling

---
 .../client/visitors/RegularElement.js         |  3 +-
 .../samples/select-option/_config.js          | 29 +++++++++++++++++++
 .../samples/select-option/main.svelte         | 10 +++++++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/select-option/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/select-option/main.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 5a74f5a115..4e906d8817 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -212,7 +212,8 @@ export function RegularElement(node, context) {
 
 	/** If true, needs `__value` for inputs */
 	const needs_special_value_handling =
-		name === 'option' || name === 'select' || bindings.has('group') || bindings.has('checked');
+		!context.state.analysis.custom_renderer &&
+		(name === 'option' || name === 'select' || bindings.has('group') || bindings.has('checked'));
 
 	if (has_spread) {
 		build_attribute_effect(
diff --git a/packages/svelte/tests/custom-renderers/samples/select-option/_config.js b/packages/svelte/tests/custom-renderers/samples/select-option/_config.js
new file mode 100644
index 0000000000..7e6e62edd7
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/select-option/_config.js
@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<select value="b"><option value="a">A</option><option value="b">B</option><option value="c">C</option></select> <p>b</p>',
+	test({ assert, target, serialize }) {
+		const select = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'select'
+		);
+		assert.ok(select);
+
+		// The select element should have a value attribute set via the normal attribute path
+		assert.equal(select.attributes['value'], 'b');
+
+		// Each option should have its value as a regular attribute
+		const options = select.children.filter(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'option'
+		);
+		assert.equal(options.length, 3);
+		assert.equal(options[0].attributes['value'], 'a');
+		assert.equal(options[1].attributes['value'], 'b');
+		assert.equal(options[2].attributes['value'], 'c');
+
+		const html = serialize(target);
+		assert.equal(
+			html,
+			'<select value="b"><option value="a">A</option><option value="b">B</option><option value="c">C</option></select> <p>b</p>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/select-option/main.svelte b/packages/svelte/tests/custom-renderers/samples/select-option/main.svelte
new file mode 100644
index 0000000000..9b6e7e9e33
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/select-option/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let selected = $state('b');
+</script>
+
+<select value={selected}>
+	<option value="a">A</option>
+	<option value="b">B</option>
+	<option value="c">C</option>
+</select>
+<p>{selected}</p>

From 84ee6a0e55db6a34c36ecb14f57a9d0205e40f00 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 09:49:25 +0200
Subject: [PATCH 57/88] fix: don't emit `selectedcontent` in custom render mode

---
 .../phases/3-transform/client/visitors/RegularElement.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 4e906d8817..661df5d180 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -476,7 +476,7 @@ export function RegularElement(node, context) {
 		context.state.after_update.push(...element_state.after_update);
 	}
 
-	if (name === 'selectedcontent') {
+	if (name === 'selectedcontent' && !context.state.analysis.custom_renderer) {
 		context.state.init.push(
 			b.stmt(
 				b.call(

From 184eaeface65e18dd56e9471c6d4291c4070889d Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 09:49:59 +0200
Subject: [PATCH 58/88] fix: allow for an offscreen_anchor per renderer

---
 .../svelte/src/internal/client/dom/blocks/each.js  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index bee21178ae..429e2f5442 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -168,8 +168,11 @@ function destroy_effects(state, to_destroy, remove_dom = true) {
 	}
 }
 
-/** @type {TemplateNode} */
-var offscreen_anchor;
+// we need to handle the case of multiple renderers so we need to use a WeakMap of offscreen anchors rather than a single variable.
+// we also need the dom_weak_key since `null` is not a viable WeakKey
+/** @type {WeakMap<WeakKey, TemplateNode>} */
+var offscreen_anchors = new WeakMap();
+var dom_weak_key = {};
 
 /**
  * Returns an anchor node suitable for offscreen rendering.
@@ -179,15 +182,18 @@ var offscreen_anchor;
  * @returns {TemplateNode}
  */
 function get_offscreen_anchor() {
-	if (offscreen_anchor !== undefined) return offscreen_anchor;
+	// not doing it inline to please typescript
+	var cached = offscreen_anchors.get(renderer ?? dom_weak_key);
+	if (cached) return cached;
 
-	offscreen_anchor = create_text();
+	var offscreen_anchor = create_text();
 
 	if (renderer) {
 		var fragment = create_fragment();
 		append_child(fragment, offscreen_anchor);
 	}
 
+	offscreen_anchors.set(renderer ?? dom_weak_key, offscreen_anchor);
 	return offscreen_anchor;
 }
 

From 49511b4a83dd0f674c20bf69f131465d74f4cb4d Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:09:09 +0200
Subject: [PATCH 59/88] fix: `defaultValue`/`defaultChecked` in spread
 attributes

---
 .../client/dom/elements/attributes.js         | 10 +++
 .../samples/default-value-spread/_config.js   | 79 +++++++++++++++++++
 .../samples/default-value-spread/main.svelte  | 16 ++++
 3 files changed, 105 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/default-value-spread/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/default-value-spread/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index e1c3d805dc..ec45e8cf0c 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -472,6 +472,16 @@ function set_attributes(
 						element.__value = null;
 					}
 				}
+			} else if (is_default && renderer != null) {
+				// Route through the renderer-aware abstraction so custom renderers
+				// see defaultValue/defaultChecked as proper attributes
+				if (name === 'defaultValue') {
+					set_element_default_value(element, value);
+				} else {
+					set_element_default_checked(element, value);
+				}
+				// remove it from attributes's cache
+				if (name in attributes) attributes[name] = UNINITIALIZED;
 			} else if (
 				is_default ||
 				(setters.includes(name) && (is_custom_element || typeof value !== 'string'))
diff --git a/packages/svelte/tests/custom-renderers/samples/default-value-spread/_config.js b/packages/svelte/tests/custom-renderers/samples/default-value-spread/_config.js
new file mode 100644
index 0000000000..e5fd87d389
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/default-value-spread/_config.js
@@ -0,0 +1,79 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, dispatch_event }) {
+		const inputs = target.children.filter(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'input'
+		);
+		const button = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+
+		assert.equal(inputs.length, 4);
+		assert.ok(button);
+
+		// Input 1: direct defaultValue attribute
+		const input_direct_val = inputs[0];
+		// Input 2: defaultValue via spread
+		const input_spread_val = inputs[1];
+		// Input 3: direct defaultChecked attribute (with `checked` alongside for consistent codegen)
+		const input_direct_chk = inputs[2];
+		// Input 4: defaultChecked via spread
+		const input_spread_chk = inputs[3];
+
+		// --- Initial state ---
+
+		// Direct defaultValue should appear as a renderer attribute
+		assert.equal(input_direct_val.attributes['value'], 'fixed');
+		assert.equal(input_direct_val.attributes['defaultValue'], 'default_val');
+
+		// Spread defaultValue should produce the SAME result as direct defaultValue.
+		// BUG: without fix, spread bypasses the renderer and writes element.defaultValue directly
+		// so the attribute won't exist on the object-based renderer node
+		assert.equal(input_spread_val.attributes['value'], 'fixed');
+		assert.equal(
+			input_spread_val.attributes['defaultValue'],
+			'default_val',
+			'defaultValue via spread should go through renderer.setAttribute, not element.defaultValue'
+		);
+
+		// Direct defaultChecked should appear as a renderer attribute
+		assert.equal(input_direct_chk.attributes['type'], 'checkbox');
+		assert.equal(input_direct_chk.attributes['checked'], '');
+		assert.equal(input_direct_chk.attributes['defaultChecked'], '');
+
+		// Spread defaultChecked should also go through the renderer API.
+		// set_element_default_checked treats true as a boolean attribute (empty string).
+		assert.equal(input_spread_chk.attributes['type'], 'checkbox');
+		assert.equal(
+			input_spread_chk.attributes['defaultChecked'],
+			'',
+			'defaultChecked via spread should go through renderer.setAttribute, not element.defaultChecked'
+		);
+
+		// --- After update ---
+		dispatch_event(button, 'click');
+		flushSync();
+
+		// Direct defaultValue should update
+		assert.equal(input_direct_val.attributes['defaultValue'], 'new_default');
+
+		// Spread defaultValue should also update via renderer
+		assert.equal(
+			input_spread_val.attributes['defaultValue'],
+			'new_default',
+			'updated defaultValue via spread should go through renderer.setAttribute'
+		);
+
+		// Direct defaultChecked should be removed (false)
+		assert.equal(input_direct_chk.attributes['defaultChecked'], undefined);
+
+		// Spread defaultChecked should also be removed via renderer
+		assert.equal(
+			input_spread_chk.attributes['defaultChecked'],
+			undefined,
+			'updated defaultChecked=false via spread should go through renderer.removeAttribute'
+		);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/default-value-spread/main.svelte b/packages/svelte/tests/custom-renderers/samples/default-value-spread/main.svelte
new file mode 100644
index 0000000000..c24601749e
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/default-value-spread/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let default_val = $state("default_val");
+	let default_chk = $state(true);
+	let spread_val = $derived({ defaultValue: default_val });
+	let spread_chk = $derived({ defaultChecked: default_chk });
+</script>
+
+<input value="fixed" defaultValue={default_val} />
+<input value="fixed" {...spread_val} />
+<input type="checkbox" checked defaultChecked={default_chk} />
+<input type="checkbox" checked {...spread_chk} />
+
+<button onclick={() => {
+	default_val = "new_default";
+	default_chk = false;
+}}>update</button>

From 62d1ce78220484d4d7d16e07e896b7085e1f7d32 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:13:06 +0200
Subject: [PATCH 60/88] fix: default to empty props if props is undefined in
 render

---
 packages/svelte/src/internal/client/custom-renderer/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index f3df528411..50d21cc68a 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -60,7 +60,7 @@ export function createRenderer(renderer) {
 						var ctx = /** @type {ComponentContext} */ (component_context);
 						if (context) ctx.c = context;
 						branch(() => {
-							/** @type {Function} */ (Component)(anchor, props);
+							/** @type {Function} */ (Component)(anchor, props ?? {});
 						});
 						pop();
 					});

From 8a8b779586a2e9694324a54f67dbe0cfa61d8fde Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:21:57 +0200
Subject: [PATCH 61/88] fix: remove anchor from target on `unmount`

---
 .../svelte/src/internal/client/custom-renderer/index.js     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index 50d21cc68a..ad6a83aa5d 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -4,6 +4,7 @@ import { boundary } from '../dom/blocks/boundary.js';
 import { branch, effect_root } from '../reactivity/effects.js';
 import { push, pop, component_context } from '../context.js';
 import { push_renderer } from './state.js';
+import { get_parent_node, remove_child } from '../dom/operations.js';
 
 /**
  * @template {object} [TFragment=object]
@@ -64,6 +65,11 @@ export function createRenderer(renderer) {
 						});
 						pop();
 					});
+
+					return () => {
+						var parent = get_parent_node(/** @type {*} */ (anchor));
+						if (parent) remove_child(parent, /** @type {*} */ (anchor));
+					};
 				});
 				return unmount;
 			} finally {

From 9c1d17e51ffc637f846e83382a9e22227a783784 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:31:09 +0200
Subject: [PATCH 62/88] fix: handle autofocus in `set_attributes`

---
 .../internal/client/dom/elements/attributes.js | 11 ++++++++++-
 .../svelte-element-autofocus/_config.js        | 18 ++++++++++++++++++
 .../svelte-element-autofocus/main.svelte       |  5 +++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index ec45e8cf0c..8bdd7d9311 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -431,7 +431,16 @@ function set_attributes(
 			// avoid using the setter
 			set_attribute(element, key, value);
 		} else if (key === 'autofocus') {
-			autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
+			if (renderer == null) {
+				autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
+			} else {
+				// In custom renderer mode, just set autofocus as a regular attribute
+				if (value) {
+					set_attribute_op(element, key, value);
+				} else {
+					remove_attribute(element, key);
+				}
+			}
 		} else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) {
 			// @ts-ignore We're not running this for custom elements because __value is actually
 			// how Lit stores the current value on the element, and messing with that would break things.
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/_config.js b/packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/_config.js
new file mode 100644
index 0000000000..8d4602f7fb
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		// If we got here, the component mounted without crashing on document.body access.
+		// Verify autofocus is set as a regular attribute.
+		const input = target.children.find(
+			(/** @type {any} */ n) => n.type === 'element' && n.name === 'input'
+		);
+		assert.ok(input, 'input element should exist');
+		assert.equal(
+			input.attributes['autofocus'],
+			'true',
+			'autofocus should be set as a regular attribute'
+		);
+		assert.equal(input.attributes['value'], 'test', 'value should be set as a regular attribute');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/main.svelte b/packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/main.svelte
new file mode 100644
index 0000000000..bea9f28141
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/svelte-element-autofocus/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let input_tag = 'input';
+</script>
+
+<svelte:element this={input_tag} autofocus value="test" />

From f68d6af1739028d2575bf3dac5342ba81d454b2c Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:35:52 +0200
Subject: [PATCH 63/88] fix: handle template as a normal tag

---
 .../phases/3-transform/client/visitors/RegularElement.js   | 2 +-
 .../tests/custom-renderers/samples/template/_config.js     | 5 +++++
 .../tests/custom-renderers/samples/template/main.svelte    | 7 +++++++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/template/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/template/main.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 661df5d180..4dc6e26ffe 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -439,7 +439,7 @@ export function RegularElement(node, context) {
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
-		if (name === 'template') {
+		if (name === 'template' && !context.state.analysis.custom_renderer) {
 			needs_reset = true;
 			child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
 			arg = b.member(arg, 'content');
diff --git a/packages/svelte/tests/custom-renderers/samples/template/_config.js b/packages/svelte/tests/custom-renderers/samples/template/_config.js
new file mode 100644
index 0000000000..d72579dd36
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/template/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<template><p>hello world</p></template>'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/template/main.svelte b/packages/svelte/tests/custom-renderers/samples/template/main.svelte
new file mode 100644
index 0000000000..302809a562
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/template/main.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	let greet = $state('hello world');
+</script>
+
+<template>
+	<p>{greet}</p>
+</template>

From 28e70f89909f85d322e00e3575179db04f9d8700 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:39:52 +0200
Subject: [PATCH 64/88] fix: allow one "window" for each renderer

---
 .../svelte/src/internal/client/custom-renderer/state.js    | 4 ++--
 packages/svelte/src/internal/client/dom/operations.js      | 7 ++++++-
 packages/svelte/src/internal/client/dom/template.js        | 3 +--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 43d8cef47a..123e333edd 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -7,8 +7,8 @@
  */
 export let renderer = null;
 
-// to use with $props.id()
-export let custom_renderer_window = {};
+// allow for a "window" for each custom renderer...to use with `$props.id`
+export let custom_renderer_window_map = new WeakMap();
 
 /**
  * @param {Renderer<any, any, any, any> | null} $renderer
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index fe9fbb4eda..6194e79944 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -13,7 +13,7 @@ import {
 } from '#client/constants';
 import { eager_block_effects } from '../reactivity/batch.js';
 import { NAMESPACE_HTML } from '../../../constants.js';
-import { custom_renderer_window, renderer } from '../custom-renderer/state.js';
+import { custom_renderer_window_map, renderer } from '../custom-renderer/state.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -791,6 +791,11 @@ export function class_list_toggle(element, name, force) {
 
 export function get_window() {
 	if (renderer) {
+		var custom_renderer_window = custom_renderer_window_map.get(renderer);
+		if (!custom_renderer_window) {
+			custom_renderer_window = {};
+			custom_renderer_window_map.set(renderer, custom_renderer_window);
+		}
 		return custom_renderer_window;
 	}
 	return window;
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index a099b7ccb5..50a468f961 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -420,9 +420,8 @@ export function props_id() {
 
 	let window = get_window();
 
-	// @ts-expect-error This way we ensure the id is unique even across Svelte runtimes
+	// This way we ensure the id is unique even across Svelte runtimes
 	(window.__svelte ??= {}).uid ??= 1;
 
-	// @ts-expect-error
 	return `c${window.__svelte.uid++}`;
 }

From ce3b8ee2d2351e915bf4617ed12a9ceecd756041 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:43:27 +0200
Subject: [PATCH 65/88] =?UTF-8?q?fix:=20explicit=20`is=5Fhtml`=C2=A0false?=
 =?UTF-8?q?=20if=20render=20is=20not=20null?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/svelte/src/internal/client/dom/elements/attributes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 8bdd7d9311..bddcadd019 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -364,7 +364,7 @@ function set_attributes(
 		}
 
 		if (key === 'class') {
-			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml' && renderer != null;
 			set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
 			current[key] = value;
 			current[CLASS] = next[CLASS];

From 8a827506576dc75d8f8b623029ddb4c5b8bea098 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 10:47:06 +0200
Subject: [PATCH 66/88] chore: left TODO for style manipulation

---
 packages/svelte/src/internal/client/dom/operations.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 6194e79944..ae6de8bf68 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -481,6 +481,8 @@ export function set_node_value(node, value) {
 
 // --- Helpers for style attribute string manipulation (custom renderer) ---
 
+// TODO: check if this can be improved?
+
 /**
  * @param {string} style_string
  * @param {string} property

From ac62333832cfe11d6ca21a476f2ccf83b3a60377 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 11:01:24 +0200
Subject: [PATCH 67/88] fix: return component exports from `render`

---
 .../internal/client/custom-renderer/index.js  | 13 ++++++---
 .../samples/component-exports/_config.js      | 29 +++++++++++++++++++
 .../samples/component-exports/main.svelte     | 13 +++++++++
 .../svelte/tests/custom-renderers/shared.ts   |  7 +++--
 packages/svelte/types/index.d.ts              |  7 +++--
 5 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/component-exports/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/component-exports/main.svelte

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index ad6a83aa5d..8d68a5f060 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -40,19 +40,24 @@ import { get_parent_node, remove_child } from '../dom/operations.js';
  * @template {object} [TTextNode=object]
  * @template {object} [TComment=object]
  * @param {Renderer<TFragment, TElement, TTextNode, TComment>} renderer
- * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: <Props extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, any, any>, options: {} extends Props ? { target: TFragment | TElement | TTextNode | TComment, props?: Props, context?: Map<any, any> } : { target: TFragment | TElement | TTextNode | TComment, props: Props, context?: Map<any, any> }) => () => void }}
+ * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: <Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? { target: TFragment | TElement | TTextNode | TComment, props?: Props, context?: Map<any, any> } : { target: TFragment | TElement | TTextNode | TComment, props: Props, context?: Map<any, any> }) => { component: Exports, unmount: () => void } }}
  */
 export function createRenderer(renderer) {
 	return {
 		...renderer,
 		/**
 		 * @template {Record<string, any>} Props
-		 * @param {ComponentType<SvelteComponent<Props>> | Component<Props, any, any>} Component
+		 * @template {Record<string, any>} Exports
+		 * @param {ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>} Component
 		 * @param {{} extends Props ? { target: TFragment | TElement | TTextNode | TComment, props?: Props, context?: Map<any, any> } : { target: TFragment | TElement | TTextNode | TComment, props: Props, context?: Map<any, any> }} options
 		 */
 		render(Component, { target, props, context }) {
 			var cleanup = push_renderer(renderer);
 			try {
+				/** @type {Exports} */
+				// @ts-expect-error will be defined because the render effect runs synchronously
+				var component = undefined;
+
 				const unmount = effect_root(() => {
 					var anchor = renderer.createComment('');
 					renderer.insert(/** @type {*} */ (target), anchor, null);
@@ -61,7 +66,7 @@ export function createRenderer(renderer) {
 						var ctx = /** @type {ComponentContext} */ (component_context);
 						if (context) ctx.c = context;
 						branch(() => {
-							/** @type {Function} */ (Component)(anchor, props ?? {});
+							component = /** @type {Function} */ (Component)(anchor, props ?? {}) || {};
 						});
 						pop();
 					});
@@ -71,7 +76,7 @@ export function createRenderer(renderer) {
 						if (parent) remove_child(parent, /** @type {*} */ (anchor));
 					};
 				});
-				return unmount;
+				return { component, unmount };
 			} finally {
 				cleanup();
 			}
diff --git a/packages/svelte/tests/custom-renderers/samples/component-exports/_config.js b/packages/svelte/tests/custom-renderers/samples/component-exports/_config.js
new file mode 100644
index 0000000000..07c63df3f4
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/component-exports/_config.js
@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<p>0</p>',
+	test({ assert, target, component, serialize }) {
+		// Component exports should be accessible
+		assert.ok(typeof component.increment === 'function', 'increment should be exported');
+		assert.ok(typeof component.get_count === 'function', 'get_count should be exported');
+
+		// Verify initial state
+		assert.equal(component.get_count(), 0);
+
+		// Call exported function and verify it updates state
+		component.increment();
+		flushSync();
+
+		assert.equal(component.get_count(), 1);
+		assert.equal(serialize(target), '<p>1</p>');
+
+		// Call it a few more times
+		component.increment();
+		component.increment();
+		flushSync();
+
+		assert.equal(component.get_count(), 3);
+		assert.equal(serialize(target), '<p>3</p>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/component-exports/main.svelte b/packages/svelte/tests/custom-renderers/samples/component-exports/main.svelte
new file mode 100644
index 0000000000..43f4023601
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/component-exports/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	export function increment() {
+		count += 1;
+	}
+
+	export function get_count() {
+		return count;
+	}
+</script>
+
+<p>{count}</p>
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index 80461521cf..c8d735c9aa 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -133,13 +133,16 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 		const target = create_root();
 
 		let unmount: (() => void) | undefined;
+		let component: Record<string, any> | undefined;
 
 		try {
-			unmount = renderer.render(mod.default, {
+			const result = renderer.render(mod.default, {
 				target,
 				props: config.props ?? {},
 				context: config.context
 			});
+			unmount = result.unmount;
+			component = result.component;
 		} catch (err) {
 			if (config.error) {
 				assert.include((err as Error).message, config.error);
@@ -175,7 +178,7 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 				await config.test({
 					assert,
 					target,
-					component: config.props ?? {},
+					component: component ?? {},
 					mod,
 					logs,
 					warnings,
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index b455b92893..dd542392c7 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2569,7 +2569,7 @@ declare module 'svelte/reactivity/window' {
 
 declare module 'svelte/renderer' {
 	export function createRenderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object>(renderer: Renderer<TFragment, TElement, TTextNode, TComment>): Renderer<TFragment, TElement, TTextNode, TComment> & {
-		render: <Props extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, any, any>, options: {} extends Props ? {
+		render: <Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {
 			target: TFragment | TElement | TTextNode | TComment;
 			props?: Props;
 			context?: Map<any, any>;
@@ -2577,7 +2577,10 @@ declare module 'svelte/renderer' {
 			target: TFragment | TElement | TTextNode | TComment;
 			props: Props;
 			context?: Map<any, any>;
-		}) => () => void;
+		}) => {
+			component: Exports;
+			unmount: () => void;
+		};
 	};
 	export type Renderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object, TNode = TFragment | TElement | TTextNode | TComment> = {
 		/**

From 7f9021a056096b17b711392cffb3cca875403cd4 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 22:54:13 +0200
Subject: [PATCH 68/88] chore: move init operations into separate module

---
 packages/svelte/package.json                                | 3 +++
 .../compiler/phases/3-transform/client/transform-client.js  | 4 ++++
 packages/svelte/src/internal/client/render.js               | 6 ------
 packages/svelte/src/internal/init-operations.js             | 3 +++
 .../samples/async-const/_expected/client/index.svelte.js    | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../async-each-hoisting/_expected/client/index.svelte.js    | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../samples/async-if-chain/_expected/client/index.svelte.js | 1 +
 .../async-if-hoisting/_expected/client/index.svelte.js      | 1 +
 .../async-in-derived/_expected/client/index.svelte.js       | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../await-block-scope/_expected/client/index.svelte.js      | 1 +
 .../bind-component-snippet/_expected/client/index.svelte.js | 1 +
 .../samples/bind-this/_expected/client/index.svelte.js      | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../_expected/client/main.svelte.js                         | 1 +
 .../each-index-non-null/_expected/client/index.svelte.js    | 1 +
 .../each-string-template/_expected/client/index.svelte.js   | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../functional-templating/_expected/client/index.svelte.js  | 1 +
 .../samples/hello-world/_expected/client/index.svelte.js    | 1 +
 .../snapshot/samples/hmr/_expected/client/index.svelte.js   | 1 +
 .../imports-in-modules/_expected/client/index.svelte.js     | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../props-identifier/_expected/client/index.svelte.js       | 1 +
 .../samples/purity/_expected/client/index.svelte.js         | 1 +
 .../_expected/client/Option.svelte.js                       | 1 +
 .../_expected/client/index.svelte.js                        | 1 +
 .../skip-static-subtree/_expected/client/index.svelte.js    | 1 +
 .../state-proxy-literal/_expected/client/index.svelte.js    | 1 +
 .../samples/svelte-element/_expected/client/index.svelte.js | 1 +
 .../text-nodes-deriveds/_expected/client/index.svelte.js    | 1 +
 35 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 packages/svelte/src/internal/init-operations.js

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 14aaf7856e..803c3f2382 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -59,6 +59,9 @@
     "./internal/disclose-version": {
       "default": "./src/internal/disclose-version.js"
     },
+    "./internal/init-operations": {
+      "default": "./src/internal/init-operations.js"
+    },
     "./internal/flags/async": {
       "default": "./src/internal/flags/async.js"
     },
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index a013db9ee3..5ba21e1ae5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -589,6 +589,10 @@ export function client_component(analysis, options) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
 
+	if (!analysis.custom_renderer) {
+		body.unshift(b.imports([], 'svelte/internal/init-operations'));
+	}
+
 	if (options.compatibility.componentApi === 4) {
 		body.unshift(b.imports([['createClassComponent', '$$_createClassComponent']], 'svelte/legacy'));
 		component_block.body.unshift(
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 37d6c401fb..b125ff0ddd 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -6,7 +6,6 @@ import {
 	create_text,
 	get_first_child,
 	get_next_sibling,
-	init_operations,
 	append_child,
 	add_event_listener,
 	remove_event_listener,
@@ -102,7 +101,6 @@ export function mount(component, options) {
  * @returns {Exports}
  */
 export function hydrate(component, options) {
-	init_operations();
 	options.intro = options.intro ?? false;
 	const target = options.target;
 	const was_hydrating = hydrating;
@@ -147,8 +145,6 @@ export function hydrate(component, options) {
 			e.hydration_failed();
 		}
 
-		// If an error occurred above, the operations might not yet have been initialised.
-		init_operations();
 		clear_text_content(target);
 
 		set_hydrating(false);
@@ -172,8 +168,6 @@ function _mount(
 	Component,
 	{ target, anchor, props = {}, events, context, intro = true, transformError }
 ) {
-	init_operations();
-
 	/** @type {Exports} */
 	// @ts-expect-error will be defined because the render effect runs synchronously
 	var component = undefined;
diff --git a/packages/svelte/src/internal/init-operations.js b/packages/svelte/src/internal/init-operations.js
new file mode 100644
index 0000000000..66ac950fcc
--- /dev/null
+++ b/packages/svelte/src/internal/init-operations.js
@@ -0,0 +1,3 @@
+import { init_operations } from './client/dom/operations.js';
+
+init_operations();
diff --git a/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js
index 8bd7e97780..0e2ceae197 100644
--- a/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js
index 6f1c40988d..57d8be5231 100644
--- a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js
index 4045ad4bf4..8c622e065d 100644
--- a/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js
index 52d92ba531..cf56405efa 100644
--- a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js
index 8d21c2ceef..5bec8aa76a 100644
--- a/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js
index e65609dca1..6aa00ac844 100644
--- a/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
index 4f06d9ddbf..747fb6078a 100644
--- a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
index 8fb09fadd2..6d2925c604 100644
--- a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js
index 668c936e4e..901de957c4 100644
--- a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
index e1b87d6280..a3d6d93d36 100644
--- a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
index a87a356d58..1e1236b923 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 import TextInput from './Child.svelte';
diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
index dfd32a04e5..4d4eebd4d6 100644
--- a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
index c9725d6718..338330bceb 100644
--- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
index 43f2eadc09..98fc065144 100644
--- a/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/delegated-locally-declared-shadowed/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
index eafadfc2ea..10553c7d71 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
index 804a7c26f1..36b446034b 100644
--- a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
index c0626bd416..d35c1840d4 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
index 762a23754c..4c2fd824bd 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
index 792d5421e1..285696ff90 100644
--- a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
index 68fdaa4570..a1748bfadc 100644
--- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
index 66d1a5af5a..ecaea72077 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
index 0eab38919c..b5a24a2206 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
index 5281a86582..b7e5b50eb8 100644
--- a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js
index 5a46b9bbef..6f7b2ef3ef 100644
--- a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index a351851875..36b0160de8 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js
index a4b18a011b..e551ef81c7 100644
--- a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js
index 8f8b115d70..78feced63d 100644
--- a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 78147659ff..f0be67fed5 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
index f3272f0414..b19c9add23 100644
--- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
index 2270005ee0..78b15fcaee 100644
--- a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
diff --git a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
index 4148a546c8..8511b45c19 100644
--- a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
@@ -1,3 +1,4 @@
+import 'svelte/internal/init-operations';
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 

From ce4442d6630259b60584f0450507fbcda9ba7f96 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 22:56:11 +0200
Subject: [PATCH 69/88] fix: allow DOM components to be mounted into custom
 renderers (require manual handling)

---
 .../client/visitors/shared/component.js          |  7 +++++++
 .../src/internal/client/custom-renderer/state.js | 16 ++++++++++++++++
 packages/svelte/src/internal/client/index.js     |  2 +-
 .../svelte/tests/custom-renderers/renderer.js    | 14 ++++++++++++--
 .../samples-dom/dom-child-component/Child.svelte |  9 +++++++++
 .../samples-dom/dom-child-component/_config.js   | 14 ++++++++++++++
 .../samples-dom/dom-child-component/main.svelte  |  7 +++++++
 packages/svelte/tests/custom-renderers/shared.ts |  8 +++++---
 .../tests/custom-renderers/test-dom.test.ts      |  8 ++++++++
 9 files changed, 79 insertions(+), 6 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/Child.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/test-dom.test.ts

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 216bf08b5c..1f732fb9f7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -456,6 +456,13 @@ export function build_component(node, component_name, loc, context) {
 		};
 	}
 
+	if (context.state.analysis.custom_renderer) {
+		const prev = fn;
+		fn = (node_id) => {
+			return b.call('$.without_renderer', b.arrow([], prev(node_id)));
+		};
+	}
+
 	if (node.type !== 'SvelteSelf') {
 		// Component name itself could be blocked on async values
 		memoizer.check_blockers(node.metadata.expression);
diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 123e333edd..a46e03f3eb 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -28,3 +28,19 @@ export function push_renderer($renderer) {
 		renderer = old_renderer;
 	};
 }
+
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function without_renderer(fn) {
+	if (renderer === null) return fn();
+	let old_renderer = renderer;
+	renderer = null;
+	try {
+		return fn();
+	} finally {
+		renderer = old_renderer;
+	}
+}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 436240ce7a..5fc98fe48b 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -181,4 +181,4 @@ export {
 export { strict_equals, equals } from './dev/equality.js';
 export { log_if_contains_state } from './dev/console-log.js';
 export { invoke_error_boundary } from './error-handling.js';
-export { push_renderer } from './custom-renderer/state.js';
+export { push_renderer, without_renderer } from './custom-renderer/state.js';
diff --git a/packages/svelte/tests/custom-renderers/renderer.js b/packages/svelte/tests/custom-renderers/renderer.js
index cec57ccc53..a92161d4f6 100644
--- a/packages/svelte/tests/custom-renderers/renderer.js
+++ b/packages/svelte/tests/custom-renderers/renderer.js
@@ -11,7 +11,7 @@ import { createRenderer } from '../../src/renderer/index.js';
 /**
  * @typedef {{ type: 'element', name: string, attributes: Record<string, string>, children: ObjNode[], listeners: Record<string, Array<{handler: any, options?: any}>>, parent: ObjNode | null }} ObjElement
  * @typedef {{ type: 'text', value: string, parent: ObjNode | null }} ObjText
- * @typedef {{ type: 'comment', value: string, parent: ObjNode | null }} ObjComment
+ * @typedef {{ type: 'comment', value: string, parent: ObjNode | null, before: (node: any)=> void }} ObjComment
  * @typedef {{ type: 'fragment', children: ObjNode[], parent: ObjNode | null }} ObjFragment
  * @typedef {ObjElement | ObjText | ObjComment | ObjFragment} ObjNode
  */
@@ -61,6 +61,11 @@ function remove_from_parent(node) {
 	children.splice(idx, 1);
 }
 
+/**
+ * @type {Array<DocumentFragment | Node>}
+ */
+export const dom_elements = [];
+
 const renderer = createRenderer({
 	createFragment() {
 		return /** @type {ObjFragment} */ ({
@@ -93,7 +98,12 @@ const renderer = createRenderer({
 		return /** @type {ObjComment} */ ({
 			type: 'comment',
 			value: data,
-			parent: null
+			parent: null,
+			// adding this allows for this renderer to interleave with a DOM-based renderer
+			// the argument will be the DOM node that represent a DOM Component being mounted
+			before(node) {
+				dom_elements.push(node);
+			}
 		});
 	},
 
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/Child.svelte b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/Child.svelte
new file mode 100644
index 0000000000..189c1a8a8c
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/Child.svelte
@@ -0,0 +1,9 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	let { message } = $props();
+</script>
+
+<div>
+	<span>{message}</span>
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js
new file mode 100644
index 0000000000..21ff9d835e
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test-dom.test';
+
+export default test({
+	// this is the custom rendered component...it doesn't have anything inside because the part of the renderer
+	// responsible for the interleaving is the `before` function on the comment node which only push into `dom_elements` in this case
+	html: '<custom></custom>',
+	test({ assert, dom_elements }) {
+		// we then get the element out of dom_elements
+		const [div] = dom_elements;
+		// check that is an actual DOM element and that it has the expected content
+		assert.instanceOf(div, HTMLDivElement);
+		assert.equal(div.outerHTML, '<div><span>hello from child</span></div>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/main.svelte
new file mode 100644
index 0000000000..87fac4cc79
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<custom>
+	<Child message="hello from child"></Child>
+</custom>
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index c8d735c9aa..8213e7624b 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -4,7 +4,7 @@ import { assert } from 'vitest';
 import { compile_directory } from '../helpers.js';
 import { suite_with_variants, type BaseTest } from '../suite.js';
 import type { CompileOptions } from '#compiler';
-import renderer, { create_root, serialize, dispatch_event } from './renderer.js';
+import renderer, { create_root, serialize, dispatch_event, dom_elements } from './renderer.js';
 import { writeFile } from 'node:fs/promises';
 
 export interface CustomRendererTest extends BaseTest {
@@ -26,6 +26,7 @@ export interface CustomRendererTest extends BaseTest {
 		renderer: typeof renderer;
 		serialize: typeof serialize;
 		dispatch_event: typeof dispatch_event;
+		dom_elements: Array<DocumentFragment | Node>;
 	}) => void | Promise<void>;
 }
 
@@ -134,8 +135,8 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 
 		let unmount: (() => void) | undefined;
 		let component: Record<string, any> | undefined;
-
 		try {
+			dom_elements.length = 0;
 			const result = renderer.render(mod.default, {
 				target,
 				props: config.props ?? {},
@@ -184,7 +185,8 @@ async function run_test(cwd: string, config: CustomRendererTest, compile_options
 					warnings,
 					renderer: renderer,
 					serialize,
-					dispatch_event
+					dispatch_event,
+					dom_elements
 				});
 			}
 
diff --git a/packages/svelte/tests/custom-renderers/test-dom.test.ts b/packages/svelte/tests/custom-renderers/test-dom.test.ts
new file mode 100644
index 0000000000..1029614bc4
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/test-dom.test.ts
@@ -0,0 +1,8 @@
+// @vitest-environment jsdom
+import { custom_renderer_suite, ok } from './shared';
+
+const { test, run } = custom_renderer_suite();
+
+export { test, ok };
+
+await run(__dirname, 'samples-dom');

From 7d37884d38c1493aadfc95ea907558609c214b67 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 22:57:06 +0200
Subject: [PATCH 70/88] fix: throw error if snippet is rendered in renderer
 different from compiler

---
 .../98-reference/.generated/client-errors.md  |  6 +++
 .../svelte/messages/client-errors/errors.md   |  4 ++
 .../3-transform/client/visitors/RenderTag.js  | 12 ++++++
 .../client/visitors/SnippetBlock.js           |  6 +++
 .../src/internal/client/dom/blocks/snippet.js | 42 +++++++++++++++++++
 packages/svelte/src/internal/client/errors.js | 16 +++++++
 packages/svelte/src/internal/client/index.js  |  7 +++-
 .../DomChild.svelte                           |  9 ++++
 .../DomSource.svelte                          |  9 ++++
 .../module-snippet-passthrough/_config.js     |  9 ++++
 .../module-snippet-passthrough/main.svelte    |  8 ++++
 .../snippet-from-custom-to-dom/Child.svelte   |  9 ++++
 .../snippet-from-custom-to-dom/_config.js     |  6 +++
 .../snippet-from-custom-to-dom/main.svelte    | 11 +++++
 .../DomComponent.svelte                       |  9 ++++
 .../snippet-from-dom-to-custom/_config.js     |  6 +++
 .../snippet-from-dom-to-custom/main.svelte    |  7 ++++
 .../samples/raw-snippet/_config.js            |  3 +-
 18 files changed, 177 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomChild.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomSource.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/Child.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/main.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/DomComponent.svelte
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/main.svelte

diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 4c6361af46..182d8659a9 100644
--- a/documentation/docs/98-reference/.generated/client-errors.md
+++ b/documentation/docs/98-reference/.generated/client-errors.md
@@ -235,6 +235,12 @@ The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 
 This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
 
+### snippet_renderer_mismatch
+
+```
+A snippet created in a component with a custom renderer cannot be rendered by a different renderer
+```
+
 ### state_descriptors_fixed
 
 ```
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index a047c04571..0eb66217c7 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -177,6 +177,10 @@ This can happen if you render a hydratable on the client that was not rendered o
 
 This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
 
+## snippet_renderer_mismatch
+
+> A snippet created in a component with a custom renderer cannot be rendered by a different renderer
+
 ## state_descriptors_fixed
 
 > Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
index 5d39cf2216..dfe7349794 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
@@ -44,6 +44,12 @@ export function RenderTag(node, context) {
 	);
 
 	if (node.metadata.dynamic) {
+		// In custom renderer components, validate that the snippet is compatible
+		// with the current renderer before rendering it
+		if (context.state.analysis.custom_renderer) {
+			snippet_function = b.call('$.validate_snippet_renderer', b.id('$renderer'), snippet_function);
+		}
+
 		// If we have a chain expression then ensure a nullish snippet function gets turned into an empty one
 		if (node.expression.type === 'ChainExpression') {
 			snippet_function = b.logical('??', snippet_function, b.id('$.noop'));
@@ -57,6 +63,12 @@ export function RenderTag(node, context) {
 			)
 		);
 	} else {
+		// In custom renderer components, validate that the snippet is compatible
+		// with the current renderer before rendering it
+		if (context.state.analysis.custom_renderer) {
+			snippet_function = b.call('$.validate_snippet_renderer', b.id('$renderer'), snippet_function);
+		}
+
 		statements.push(
 			add_svelte_meta(
 				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index 6c3a48c5ea..ff11826aec 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -79,6 +79,12 @@ export function SnippetBlock(node, context) {
 		? b.call('$.wrap_snippet', b.id(context.state.analysis.name), b.function(null, args, body))
 		: b.arrow(args, body);
 
+	// wrap snippets in components with a custom renderer so they can only be
+	// rendered by the same renderer that compiled them
+	if (context.state.analysis.custom_renderer) {
+		snippet = b.call('$.renderer_snippet', b.id('$renderer'), snippet);
+	}
+
 	const declaration = b.const(node.expression, snippet);
 
 	// Top-level snippets are hoisted so they can be referenced in the `<script>`
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index 961a56acf7..da25e8ce16 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -62,6 +62,48 @@ export function wrap_snippet(component, fn) {
 	return snippet;
 }
 
+/**
+ * Wraps a snippet function created in a component with a custom renderer,
+ * ensuring it can only be rendered by the same renderer.
+ * @template {(...args: any[]) => void} T
+ * @param {any} expected_renderer
+ * @param {T} fn
+ * @returns {T}
+ */
+export function renderer_snippet(expected_renderer, fn) {
+	var wrapped = /** @type {T} */ (
+		(.../** @type {any[]} */ args) => {
+			if (renderer !== expected_renderer) {
+				e.snippet_renderer_mismatch();
+			}
+			return fn(...args);
+		}
+	);
+	// we could technically avoid checking for expected_renderer in the function
+	// and store it in the returned function to check with `validate_snippet_renderer`
+	// but this keeps all the changes on the custom renderer side and leave the paths
+	// of "normal svelte" untouched...since that's the default people are gonna use
+	// svelte with we should optimize for that case
+	/** @type {any} */ (wrapped).__renderer = expected_renderer;
+
+	return wrapped;
+}
+
+/**
+ * Validates that a snippet function is compatible with the given renderer.
+ * Used at render sites in custom renderer components.
+ * @template {((...args: any[]) => void) | null | undefined} T
+ * @param {any} expected_renderer
+ * @param {T} fn
+ * @returns {T}
+ */
+export function validate_snippet_renderer(expected_renderer, fn) {
+	if (fn != null && /** @type {any} */ (fn).__renderer !== expected_renderer) {
+		e.snippet_renderer_mismatch();
+	}
+	return fn;
+}
+
 /**
  * Create a snippet programmatically
  * @template {unknown[]} Params
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index facfd18e26..651480a3d6 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -461,6 +461,22 @@ export function set_context_after_init() {
 	}
 }
 
+/**
+ * A snippet created in a component with a custom renderer cannot be rendered by a different renderer
+ * @returns {never}
+ */
+export function snippet_renderer_mismatch() {
+	if (DEV) {
+		const error = new Error(`snippet_renderer_mismatch\nA snippet created in a component with a custom renderer cannot be rendered by a different renderer\nhttps://svelte.dev/e/snippet_renderer_mismatch`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/snippet_renderer_mismatch`);
+	}
+}
+
 /**
  * Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
  * @returns {never}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 5fc98fe48b..1ea4269ab4 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -18,7 +18,12 @@ export { css_props } from './dom/blocks/css-props.js';
 export { index, each } from './dom/blocks/each.js';
 export { html } from './dom/blocks/html.js';
 export { sanitize_slots, slot } from './dom/blocks/slot.js';
-export { snippet, wrap_snippet } from './dom/blocks/snippet.js';
+export {
+	snippet,
+	wrap_snippet,
+	renderer_snippet,
+	validate_snippet_renderer
+} from './dom/blocks/snippet.js';
 export { component } from './dom/blocks/svelte-component.js';
 export { element } from './dom/blocks/svelte-element.js';
 export { head } from './dom/blocks/svelte-head.js';
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomChild.svelte b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomChild.svelte
new file mode 100644
index 0000000000..ab6bcd66d9
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomChild.svelte
@@ -0,0 +1,9 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	let { greeting } = $props();
+</script>
+
+<div>
+	{@render greeting('world')}
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomSource.svelte b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomSource.svelte
new file mode 100644
index 0000000000..e53f66f5af
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/DomSource.svelte
@@ -0,0 +1,9 @@
+<svelte:options customRenderer={null} />
+
+<script module>
+	export { greeting };
+</script>
+
+{#snippet greeting(name)}
+	<span>hello {name}</span>
+{/snippet}
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/_config.js
new file mode 100644
index 0000000000..e6d9b65be8
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test-dom.test';
+
+export default test({
+	// The key assertion is that this test does not throw.
+	// A DOM module snippet imported by a custom renderer component and
+	// passed to a DOM child component should work without errors.
+	// We don't check html because the DOM child renders into the real DOM,
+	// not the custom renderer tree.
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/main.svelte
new file mode 100644
index 0000000000..2d63c153e8
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/module-snippet-passthrough/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { greeting } from './DomSource.svelte';
+	import DomChild from './DomChild.svelte';
+</script>
+
+<div>
+	<DomChild {greeting}></DomChild>
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/Child.svelte b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/Child.svelte
new file mode 100644
index 0000000000..ab6bcd66d9
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/Child.svelte
@@ -0,0 +1,9 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	let { greeting } = $props();
+</script>
+
+<div>
+	{@render greeting('world')}
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/_config.js
new file mode 100644
index 0000000000..14129d9a41
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test-dom.test';
+
+export default test({
+	error:
+		'A snippet created in a component with a custom renderer cannot be rendered by a different renderer'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/main.svelte
new file mode 100644
index 0000000000..728d1c71c4
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-custom-to-dom/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+{#snippet greeting(name)}
+	<span>hello {name}</span>
+{/snippet}
+
+<div>
+	<Child {greeting}></Child>
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/DomComponent.svelte b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/DomComponent.svelte
new file mode 100644
index 0000000000..e53f66f5af
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/DomComponent.svelte
@@ -0,0 +1,9 @@
+<svelte:options customRenderer={null} />
+
+<script module>
+	export { greeting };
+</script>
+
+{#snippet greeting(name)}
+	<span>hello {name}</span>
+{/snippet}
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/_config.js
new file mode 100644
index 0000000000..14129d9a41
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test-dom.test';
+
+export default test({
+	error:
+		'A snippet created in a component with a custom renderer cannot be rendered by a different renderer'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/main.svelte
new file mode 100644
index 0000000000..f7438ee66e
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/snippet-from-dom-to-custom/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { greeting } from './DomComponent.svelte';
+</script>
+
+<div>
+	{@render greeting('world')}
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js b/packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js
index aa4c289bde..074c4e38a6 100644
--- a/packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/raw-snippet/_config.js
@@ -1,5 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	error: '`createRawSnippet` cannot be used with a custom renderer'
+	error:
+		'A snippet created in a component with a custom renderer cannot be rendered by a different renderer'
 });

From 883611fd8b0f3111c6661eae140f840a4b69653a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Apr 2026 23:11:35 +0200
Subject: [PATCH 71/88] chore: remove duplicate error

---
 .../docs/98-reference/.generated/compile-errors.md       | 6 ------
 packages/svelte/messages/compile-errors/options.md       | 4 ----
 packages/svelte/src/compiler/errors.js                   | 9 ---------
 .../svelte/src/compiler/phases/1-parse/read/options.js   | 2 +-
 packages/svelte/src/compiler/phases/2-analyze/index.js   | 2 +-
 .../samples/css-injected-compiler-option/_config.js      | 3 +--
 .../samples/css-injected-mixed/_config.js                | 3 +--
 .../samples/css-injected-svelte-options/_config.js       | 3 +--
 8 files changed, 5 insertions(+), 27 deletions(-)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index c6e2674b88..79600f5854 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -695,12 +695,6 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
-### options_css_injected_with_custom_renderer
-
-```
-`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection
-```
-
 ### options_invalid_value
 
 ```
diff --git a/packages/svelte/messages/compile-errors/options.md b/packages/svelte/messages/compile-errors/options.md
index f841aacd2b..0709f0d3f6 100644
--- a/packages/svelte/messages/compile-errors/options.md
+++ b/packages/svelte/messages/compile-errors/options.md
@@ -1,7 +1,3 @@
-## options_css_injected_with_custom_renderer
-
-> `css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection
-
 ## options_invalid_value
 
 > Invalid compiler option: %details%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 897013353c..bafb450ab4 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -47,15 +47,6 @@ function e(node, code, message) {
 	throw new InternalCompileError(code, message, start !== undefined ? [start, end ?? start] : undefined);
 }
 
-/**
- * `css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection
- * @param {null | number | NodeLike} node
- * @returns {never}
- */
-export function options_css_injected_with_custom_renderer(node) {
-	e(node, 'options_css_injected_with_custom_renderer', `\`css: "injected"\` is not compatible with \`customRenderer\` — custom renderers do not support CSS injection\nhttps://svelte.dev/e/options_css_injected_with_custom_renderer`);
-}
-
 /**
  * Invalid compiler option: %details%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index a55a23357e..79f331b72d 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -202,7 +202,7 @@ export default function read_options(node) {
 		const css_attribute = node.attributes.find(
 			(/** @type {any} */ a) => a.type === 'Attribute' && a.name === 'css'
 		);
-		e.options_css_injected_with_custom_renderer(css_attribute ?? node);
+		e.incompatible_with_custom_renderer(css_attribute ?? node, "`css: 'injected'`");
 	}
 
 	return component_options;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 75cb299e2f..046d89a3c0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -470,7 +470,7 @@ export function analyze_component(root, source, options) {
 	const custom_renderer = options.experimental.customRenderer?.({ filename: options.filename });
 
 	if (css === 'injected' && custom_renderer !== undefined) {
-		e.options_css_injected_with_custom_renderer(null);
+		e.incompatible_with_custom_renderer(null, "`css: 'injected'`");
 	}
 
 	const custom_element = options.customElementOptions ?? custom_element_from_option;
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js b/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js
index 963218a3fb..189313ea2e 100644
--- a/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-compiler-option/_config.js
@@ -4,6 +4,5 @@ export default test({
 	compileOptions: {
 		css: 'injected'
 	},
-	compile_error:
-		'`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection'
+	compile_error: "`css: 'injected'` is not compatible with `customRenderer`"
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js b/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js
index 5b7e622cc7..473ff7817c 100644
--- a/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-mixed/_config.js
@@ -1,6 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	compile_error:
-		'`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection'
+	compile_error: "`css: 'injected'` is not compatible with `customRenderer`"
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js b/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js
index 5b7e622cc7..473ff7817c 100644
--- a/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/css-injected-svelte-options/_config.js
@@ -1,6 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	compile_error:
-		'`css: "injected"` is not compatible with `customRenderer` — custom renderers do not support CSS injection'
+	compile_error: "`css: 'injected'` is not compatible with `customRenderer`"
 });

From 801c8ef4aed03a557d6f7163f1486eee2f754e39 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 3 Apr 2026 10:06:47 +0200
Subject: [PATCH 72/88] fix: don't emit HTML warnings in custom renderer
 compile

---
 .../2-analyze/visitors/ExpressionTag.js       |  2 +-
 .../2-analyze/visitors/RegularElement.js      | 14 +++-
 .../2-analyze/visitors/SvelteElement.js       |  5 +-
 .../phases/2-analyze/visitors/Text.js         |  3 +-
 .../2-analyze/visitors/shared/element.js      |  4 +-
 .../samples/no-html-warnings/_config.js       |  9 +++
 .../samples/no-html-warnings/main.svelte      | 79 +++++++++++++++++++
 .../svelte/tests/custom-renderers/shared.ts   | 17 ++++
 8 files changed, 124 insertions(+), 9 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/no-html-warnings/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/no-html-warnings/main.svelte

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index 88fe4e6afa..519dee6a97 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -11,7 +11,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function ExpressionTag(node, context) {
 	const in_template = context.path.at(-1)?.type === 'Fragment';
 
-	if (in_template && context.state.parent_element) {
+	if (in_template && context.state.parent_element && !context.state.analysis.custom_renderer) {
 		const message = is_tag_valid_with_parent('#text', context.state.parent_element);
 		if (message) {
 			e.node_invalid_placement(node, message);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index f32e249b4c..383cebcaf6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -25,7 +25,10 @@ import { runes } from '../../../state.js';
  */
 export function RegularElement(node, context) {
 	validate_element(node, context);
-	check_element(node, context);
+
+	if (!context.state.analysis.custom_renderer) {
+		check_element(node, context);
+	}
 
 	node.metadata.path = [...context.path];
 	context.state.analysis.elements.push(node);
@@ -34,7 +37,9 @@ export function RegularElement(node, context) {
 	if (node.name === 'textarea' && node.fragment.nodes.length > 0) {
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'Attribute' && attribute.name === 'value') {
-				e.textarea_invalid_content(node);
+				if (!context.state.analysis.custom_renderer) {
+					e.textarea_invalid_content(node);
+				}
 			}
 		}
 
@@ -160,7 +165,7 @@ export function RegularElement(node, context) {
 		mark_subtree_dynamic(context.path);
 	}
 
-	if (context.state.parent_element) {
+	if (context.state.parent_element && !context.state.analysis.custom_renderer) {
 		let past_parent = false;
 		let only_warn = false;
 		const ancestors = [context.state.parent_element];
@@ -221,7 +226,8 @@ export function RegularElement(node, context) {
 		context.state.analysis.source[node.end - 2] === '/' &&
 		!is_void(node_name) &&
 		!is_svg(node_name) &&
-		!is_mathml(node_name)
+		!is_mathml(node_name) &&
+		!context.state.analysis.custom_renderer
 	) {
 		w.element_invalid_self_closing_tag(node, node.name);
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index 3f7b0ec6b8..919ce897e0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -12,7 +12,10 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  */
 export function SvelteElement(node, context) {
 	validate_element(node, context);
-	check_element(node, context);
+
+	if (!context.state.analysis.custom_renderer) {
+		check_element(node, context);
+	}
 
 	node.metadata.path = [...context.path];
 	context.state.analysis.elements.push(node);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
index a03421e8dd..410614531a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
@@ -16,7 +16,8 @@ export function Text(node, context) {
 	if (
 		parent.type === 'Fragment' &&
 		context.state.parent_element &&
-		regex_not_whitespace.test(node.data)
+		regex_not_whitespace.test(node.data) &&
+		!context.state.analysis.custom_renderer
 	) {
 		const message = is_tag_valid_with_parent('#text', context.state.parent_element);
 		if (message) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
index 725a4aded8..925ea69dfb 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
@@ -79,12 +79,12 @@ export function validate_element(node, context) {
 				validate_slot_attribute(context, attribute);
 			}
 
-			if (attribute.name === 'is') {
+			if (attribute.name === 'is' && !context.state.analysis.custom_renderer) {
 				w.attribute_avoid_is(attribute);
 			}
 
 			const correct_name = react_attributes.get(attribute.name);
-			if (correct_name) {
+			if (correct_name && !context.state.analysis.custom_renderer) {
 				w.attribute_invalid_property_name(attribute, attribute.name, correct_name);
 			}
 
diff --git a/packages/svelte/tests/custom-renderers/samples/no-html-warnings/_config.js b/packages/svelte/tests/custom-renderers/samples/no-html-warnings/_config.js
new file mode 100644
index 0000000000..1c376c3cec
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/no-html-warnings/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+// This test verifies that HTML-specific warnings and errors are NOT produced
+// when compiling with a custom renderer. All patterns in main.svelte would
+// normally trigger compile errors or warnings in standard HTML mode.
+// With a custom renderer, they should all be silently accepted.
+export default test({
+	compile_warnings: false
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/no-html-warnings/main.svelte b/packages/svelte/tests/custom-renderers/samples/no-html-warnings/main.svelte
new file mode 100644
index 0000000000..f9e81ccbf0
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/no-html-warnings/main.svelte
@@ -0,0 +1,79 @@
+<script>
+	let text = $state('expression in table');
+	let show = $state(true);
+</script>
+
+<!-- 1. node_invalid_placement: <a> containing <a> -->
+<a><a>link</a></a>
+
+<!-- 2. node_invalid_placement: text inside <table> -->
+<table>text inside table</table>
+
+<!-- 3. node_invalid_placement: expression tag inside <table> -->
+<table>{text}</table>
+
+<!-- 4. element_invalid_self_closing_tag: self-closing non-void element -->
+<div />
+
+<!-- 5. textarea_invalid_content: textarea with both value attribute and children -->
+<textarea value={text}>child</textarea>
+
+<!-- 6. attribute_avoid_is: the `is` attribute -->
+<button is="my-button">custom element</button>
+
+<!-- 7. attribute_invalid_property_name: React-style className -->
+<div className="foo">className test</div>
+
+<!-- 8. attribute_invalid_property_name: React-style htmlFor -->
+<label htmlFor="input-id">htmlFor test</label>
+
+<!-- 9. a11y_accesskey: accesskey attribute -->
+<div accesskey="s">accesskey test</div>
+
+<!-- 10. a11y_autofocus: autofocus on input -->
+<input autofocus />
+
+<!-- 11. a11y_misplaced_scope: scope on div -->
+<div scope="col">misplaced scope</div>
+
+<!-- 12. a11y_positive_tabindex: positive tabindex -->
+<div tabindex="5">positive tabindex</div>
+
+<!-- 13. a11y_hidden: aria-hidden on heading -->
+<h1 aria-hidden="true">hidden heading</h1>
+
+<!-- 14. a11y_missing_attribute: img without alt -->
+<img src="test.png" />
+
+<!-- 15. a11y_unknown_aria_attribute: unknown aria attribute -->
+<div aria-describedat="foo">unknown aria</div>
+
+<!-- 16. a11y_no_redundant_roles: redundant role on nav -->
+<nav role="navigation">redundant role</nav>
+
+<!-- 17. a11y_figcaption_parent: figcaption outside figure -->
+<figcaption>orphan figcaption</figcaption>
+
+<!-- 18. a11y_distracting_elements: marquee -->
+<marquee>distracting</marquee>
+
+<!-- 19. a11y_consider_explicit_label: <a> without text -->
+<a href="https://example.com"></a>
+
+<!-- 20. a11y_label_has_associated_control: label without associated control -->
+<label>no control</label>
+
+<!-- 21. a11y_missing_content: empty h2 -->
+<h2></h2>
+
+<!-- 22. node_invalid_placement_ssr: invalid nesting inside conditional block -->
+<div>
+	{#if show}
+		<tr><td>conditional nesting</td></tr>
+	{/if}
+</div>
+
+<!-- 23. a11y via svelte:element: a11y warnings should also be suppressed on <svelte:element> -->
+<svelte:element this={"img"} src="test.png" />
+<svelte:element this={"div"} accesskey="s">accesskey on svelte:element</svelte:element>
+<svelte:element this={"h1"} aria-hidden="true">hidden svelte:element heading</svelte:element>
diff --git a/packages/svelte/tests/custom-renderers/shared.ts b/packages/svelte/tests/custom-renderers/shared.ts
index 8213e7624b..8a269eb9ba 100644
--- a/packages/svelte/tests/custom-renderers/shared.ts
+++ b/packages/svelte/tests/custom-renderers/shared.ts
@@ -1,3 +1,4 @@
+import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { setImmediate } from 'node:timers/promises';
 import { assert } from 'vitest';
@@ -6,6 +7,7 @@ import { suite_with_variants, type BaseTest } from '../suite.js';
 import type { CompileOptions } from '#compiler';
 import renderer, { create_root, serialize, dispatch_event, dom_elements } from './renderer.js';
 import { writeFile } from 'node:fs/promises';
+import { globSync } from 'tinyglobby';
 
 export interface CustomRendererTest extends BaseTest {
 	html?: string;
@@ -14,6 +16,7 @@ export interface CustomRendererTest extends BaseTest {
 	context?: Map<any, any>;
 	error?: string;
 	compile_error?: string;
+	compile_warnings?: false;
 	runtime_error?: string;
 	warnings?: string[];
 	test?: (args: {
@@ -85,6 +88,20 @@ async function common_setup(
 		throw err;
 	}
 
+	if (config.compile_warnings === false) {
+		const output_dir = `${cwd}/_output/client`;
+		const warning_files = globSync('**/*.warnings.json', { cwd: output_dir });
+
+		for (const file of warning_files) {
+			const warnings = JSON.parse(fs.readFileSync(path.join(output_dir, file), 'utf-8'));
+			assert.deepEqual(
+				warnings,
+				[],
+				`Expected no compile warnings in ${file}, got: ${warnings.map((/** @type {any} */ w: any) => w.code).join(', ')}`
+			);
+		}
+	}
+
 	return compile_options;
 }
 

From 4440cec525c698f023042dfdbeb6c8ac5ef1c01b Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 3 Apr 2026 12:44:45 +0200
Subject: [PATCH 73/88] chore: better types

---
 .../src/internal/client/custom-renderer/index.js | 16 ++++++++--------
 packages/svelte/types/index.d.ts                 | 16 ++++++++--------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index 8d68a5f060..eeb7b4734b 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -18,20 +18,20 @@ import { get_parent_node, remove_child } from '../dom/operations.js';
  * @property {(data: string)=>TTextNode} createTextNode - Creates a text node with the given data.
  * @property {(data: string)=>TComment} createComment - Creates a comment node with the given data. This is often used as an anchor for inserting elements, it doesn't necessarily need to be rendered
  * @property {(node: TNode)=> "fragment" | "element" | "text" | "comment"} nodeType - Should return the type of the node in string form ("fragment", "element", "text", "comment").
- * @property {(node: TNode)=>string | null} getNodeValue - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
+ * @property {(node: TTextNode | TComment)=>string | null} getNodeValue - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
  * @property {(element: TElement, name: string)=>string | null} getAttribute - Return the value of the attribute with the given name on the element, or null if it doesn't exist
  * @property {(element: TElement, key: string, value: any)=>void} setAttribute - Set the attribute with the given name and value on the element
  * @property {(element: TElement, name: string)=>void} removeAttribute - Remove the attribute with the given name from the element
  * @property {(element: TElement, name: string)=>boolean} hasAttribute - Return true if the element has an attribute with the given name
- * @property {(node: TNode, text: string)=>void} setText - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
+ * @property {(node: TElement | TTextNode | TComment, text: string)=>void} setText - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
  * @property {(element: TElement | TFragment)=>TNode | null} getFirstChild - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
  * @property {(element: TElement | TFragment)=>TNode | null} getLastChild - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
- * @property {(element: TNode)=>TNode | null} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
- * @property {(parent: TElement | TFragment, element: TNode, anchor: TNode | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents
- * @property {(node: TNode)=>void} remove - Remove the node from the tree
- * @property {(element: TNode)=>TNode | null} getParent - Return the parent of the element, or null if it has no parent
- * @property {(target: TNode, type: string, handler: any, options?: any)=>void} addEventListener - Add an event listener of the given type and handler to the target node, with optional options
- * @property {(target: TNode, type: string, handler: any, options?: any)=>void} removeEventListener - Remove an event listener of the given type and handler from the target node, with optional options
+ * @property {(node: TElement | TTextNode | TComment)=>TNode | null} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
+ * @property {(parent: TElement | TFragment, element: TNode, anchor: TNode | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
+ * @property {(node: TElement | TTextNode | TComment)=>void} remove - Remove the node from the tree
+ * @property {(element: TElement | TTextNode | TComment)=>TNode | null} getParent - Return the parent of the element, or null if it has no parent
+ * @property {(target: TElement, type: string, handler: any, options?: any)=>void} addEventListener - Add an event listener of the given type and handler to the target node, with optional options
+ * @property {(target: TElement, type: string, handler: any, options?: any)=>void} removeEventListener - Remove an event listener of the given type and handler from the target node, with optional options
  */
 
 /**
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index dd542392c7..fa58133fc3 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2606,7 +2606,7 @@ declare module 'svelte/renderer' {
 		/**
 		 * - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
 		 */
-		getNodeValue: (node: TNode) => string | null;
+		getNodeValue: (node: TTextNode | TComment) => string | null;
 		/**
 		 * - Return the value of the attribute with the given name on the element, or null if it doesn't exist
 		 */
@@ -2626,7 +2626,7 @@ declare module 'svelte/renderer' {
 		/**
 		 * - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
 		 */
-		setText: (node: TNode, text: string) => void;
+		setText: (node: TElement | TTextNode | TComment, text: string) => void;
 		/**
 		 * - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
 		 */
@@ -2638,27 +2638,27 @@ declare module 'svelte/renderer' {
 		/**
 		 * - Return the next sibling of the node, or null if it has no next sibling
 		 */
-		getNextSibling: (element: TNode) => TNode | null;
+		getNextSibling: (node: TElement | TTextNode | TComment) => TNode | null;
 		/**
-		 * - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents
+		 * - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
 		 */
 		insert: (parent: TElement | TFragment, element: TNode, anchor: TNode | null) => void;
 		/**
 		 * - Remove the node from the tree
 		 */
-		remove: (node: TNode) => void;
+		remove: (node: TElement | TTextNode | TComment) => void;
 		/**
 		 * - Return the parent of the element, or null if it has no parent
 		 */
-		getParent: (element: TNode) => TNode | null;
+		getParent: (element: TElement | TTextNode | TComment) => TNode | null;
 		/**
 		 * - Add an event listener of the given type and handler to the target node, with optional options
 		 */
-		addEventListener: (target: TNode, type: string, handler: any, options?: any) => void;
+		addEventListener: (target: TElement, type: string, handler: any, options?: any) => void;
 		/**
 		 * - Remove an event listener of the given type and handler from the target node, with optional options
 		 */
-		removeEventListener: (target: TNode, type: string, handler: any, options?: any) => void;
+		removeEventListener: (target: TElement, type: string, handler: any, options?: any) => void;
 	};
 	/**
 	 * @deprecated In Svelte 4, components are classes. In Svelte 5, they are functions.

From 0b3d17986e90ea5b10c4c340fe903020a54d49f4 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 3 Apr 2026 13:14:55 +0200
Subject: [PATCH 74/88] chore: better types

---
 packages/svelte/src/internal/client/custom-renderer/index.js | 2 +-
 packages/svelte/types/index.d.ts                             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index eeb7b4734b..82ea5112c6 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -27,7 +27,7 @@ import { get_parent_node, remove_child } from '../dom/operations.js';
  * @property {(element: TElement | TFragment)=>TNode | null} getFirstChild - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
  * @property {(element: TElement | TFragment)=>TNode | null} getLastChild - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
  * @property {(node: TElement | TTextNode | TComment)=>TNode | null} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
- * @property {(parent: TElement | TFragment, element: TNode, anchor: TNode | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
+ * @property {(parent: TElement | TFragment, element: TNode, anchor: TElement | TTextNode | TComment | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
  * @property {(node: TElement | TTextNode | TComment)=>void} remove - Remove the node from the tree
  * @property {(element: TElement | TTextNode | TComment)=>TNode | null} getParent - Return the parent of the element, or null if it has no parent
  * @property {(target: TElement, type: string, handler: any, options?: any)=>void} addEventListener - Add an event listener of the given type and handler to the target node, with optional options
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index fa58133fc3..fecbcda419 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2642,7 +2642,7 @@ declare module 'svelte/renderer' {
 		/**
 		 * - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
 		 */
-		insert: (parent: TElement | TFragment, element: TNode, anchor: TNode | null) => void;
+		insert: (parent: TElement | TFragment, element: TNode, anchor: TElement | TTextNode | TComment | null) => void;
 		/**
 		 * - Remove the node from the tree
 		 */

From 9272440c8f50d46811e8971a0f5924c33e10fbbb Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 7 Apr 2026 10:28:14 +0200
Subject: [PATCH 75/88] fix: push renderer at the very top of component

---
 .../phases/3-transform/client/transform-client.js  | 14 +++++++-------
 .../samples/props-id/Nested.svelte                 |  5 +++++
 .../custom-renderers/samples/props-id/_config.js   |  2 +-
 .../custom-renderers/samples/props-id/main.svelte  |  4 +++-
 4 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/props-id/Nested.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 5ba21e1ae5..c3a198d5e8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -406,13 +406,6 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	if (analysis.custom_renderer) {
-		component_block.body.unshift(
-			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
-		);
-		component_block.body.push(b.stmt(b.call('$$pop_renderer')));
-	}
-
 	let should_inject_props =
 		should_inject_context ||
 		analysis.needs_props ||
@@ -616,6 +609,13 @@ export function client_component(analysis, options) {
 		component_block.body.unshift(b.const(analysis.props_id, b.call('$.props_id')));
 	}
 
+	if (analysis.custom_renderer) {
+		component_block.body.unshift(
+			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
+		);
+		component_block.body.push(b.stmt(b.call('$$pop_renderer')));
+	}
+
 	if (state.events.size > 0) {
 		body.push(
 			b.stmt(b.call('$.delegate', b.array(Array.from(state.events).map((name) => b.literal(name)))))
diff --git a/packages/svelte/tests/custom-renderers/samples/props-id/Nested.svelte b/packages/svelte/tests/custom-renderers/samples/props-id/Nested.svelte
new file mode 100644
index 0000000000..bbed82af1e
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/props-id/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+{id}
\ No newline at end of file
diff --git a/packages/svelte/tests/custom-renderers/samples/props-id/_config.js b/packages/svelte/tests/custom-renderers/samples/props-id/_config.js
index 904e7498a8..9006b4e2fb 100644
--- a/packages/svelte/tests/custom-renderers/samples/props-id/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/props-id/_config.js
@@ -1,5 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	html: 'c1'
+	html: 'c1 c2'
 });
diff --git a/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte b/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte
index bbed82af1e..a5e2bf4395 100644
--- a/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte
+++ b/packages/svelte/tests/custom-renderers/samples/props-id/main.svelte
@@ -1,5 +1,7 @@
 <script>
+	import Nested from './Nested.svelte';
 	let id = $props.id();
 </script>
 
-{id}
\ No newline at end of file
+{id}
+<Nested />
\ No newline at end of file

From 7c74482796c032303ebb26bc6930599c2eafd775 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 7 Apr 2026 10:31:00 +0200
Subject: [PATCH 76/88] fix: push same returned renderer in `renderer.render`

---
 .../svelte/src/internal/client/custom-renderer/index.js  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index 82ea5112c6..96667d213a 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -43,7 +43,7 @@ import { get_parent_node, remove_child } from '../dom/operations.js';
  * @returns {Renderer<TFragment, TElement, TTextNode, TComment> & { render: <Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? { target: TFragment | TElement | TTextNode | TComment, props?: Props, context?: Map<any, any> } : { target: TFragment | TElement | TTextNode | TComment, props: Props, context?: Map<any, any> }) => { component: Exports, unmount: () => void } }}
  */
 export function createRenderer(renderer) {
-	return {
+	const compound_renderer = {
 		...renderer,
 		/**
 		 * @template {Record<string, any>} Props
@@ -52,15 +52,15 @@ export function createRenderer(renderer) {
 		 * @param {{} extends Props ? { target: TFragment | TElement | TTextNode | TComment, props?: Props, context?: Map<any, any> } : { target: TFragment | TElement | TTextNode | TComment, props: Props, context?: Map<any, any> }} options
 		 */
 		render(Component, { target, props, context }) {
-			var cleanup = push_renderer(renderer);
+			var cleanup = push_renderer(compound_renderer);
 			try {
 				/** @type {Exports} */
 				// @ts-expect-error will be defined because the render effect runs synchronously
 				var component = undefined;
 
 				const unmount = effect_root(() => {
-					var anchor = renderer.createComment('');
-					renderer.insert(/** @type {*} */ (target), anchor, null);
+					var anchor = compound_renderer.createComment('');
+					compound_renderer.insert(/** @type {*} */ (target), anchor, null);
 					boundary(/** @type {*} */ (anchor), { pending: () => {} }, (anchor) => {
 						push({});
 						var ctx = /** @type {ComponentContext} */ (component_context);
@@ -82,4 +82,5 @@ export function createRenderer(renderer) {
 			}
 		}
 	};
+	return compound_renderer;
 }

From b4431e9738f04b7b0d704ef760981bbc0c17aa66 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 7 Apr 2026 11:24:04 +0200
Subject: [PATCH 77/88] fix: disallow on directive with custom renderers

---
 .../src/compiler/phases/2-analyze/visitors/OnDirective.js    | 5 +++++
 .../tests/custom-renderers/samples/on-directive/_config.js   | 5 +++++
 .../tests/custom-renderers/samples/on-directive/main.svelte  | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/on-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/on-directive/main.svelte

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
index b8a0d95671..e9a3202505 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
@@ -1,5 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
@@ -8,6 +9,10 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function OnDirective(node, context) {
+	if (context.state.analysis.custom_renderer) {
+		e.incompatible_with_custom_renderer(node, '`on:`');
+	}
+
 	if (context.state.analysis.runes) {
 		const parent_type = context.path.at(-1)?.type;
 
diff --git a/packages/svelte/tests/custom-renderers/samples/on-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/on-directive/_config.js
new file mode 100644
index 0000000000..10c8acb2be
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/on-directive/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	compile_error: '`on:` is not compatible with `customRenderer`'
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/on-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/on-directive/main.svelte
new file mode 100644
index 0000000000..55f36a437f
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/on-directive/main.svelte
@@ -0,0 +1 @@
+<button on:click={() => {}}>click me</button>

From b50bdde4bf8ea01bcea95a81ad7aa552b6a47be5 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 9 Apr 2026 09:09:13 +0200
Subject: [PATCH 78/88] fix: `HMR_ANCHOR` use operations methods

---
 packages/svelte/src/internal/client/dom/blocks/branches.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/dom/blocks/branches.js b/packages/svelte/src/internal/client/dom/blocks/branches.js
index 94f05ab27c..5173bd9243 100644
--- a/packages/svelte/src/internal/client/dom/blocks/branches.js
+++ b/packages/svelte/src/internal/client/dom/blocks/branches.js
@@ -117,7 +117,7 @@ export class BranchManager {
 				if (DEV) {
 					// Tell hmr.js about the anchor it should use for updates,
 					// since the initial one will be removed
-					/** @type {any} */ (offscreen.fragment.lastChild)[HMR_ANCHOR] = this.anchor;
+					/** @type {any} */ (get_last_child(offscreen.fragment))[HMR_ANCHOR] = this.anchor;
 				}
 
 				// remove the anchor...

From 5c60dff58892d701a410cfb334cfb24cc6df5d4e Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 11 Apr 2026 10:47:49 +0200
Subject: [PATCH 79/88] chore: rename `custom_renderer_imports`

---
 .../compiler/phases/3-transform/client/transform-client.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index c3a198d5e8..a4f9b9dfce 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -141,7 +141,7 @@ const visitors = {
 /**
  * @param {string | undefined} custom_renderer_module
  */
-function custom_renderer_imports(custom_renderer_module) {
+function get_imports(custom_renderer_module) {
 	const imports = [b.import_all('$', 'svelte/internal/client')];
 	if (custom_renderer_module) {
 		imports.push(b.imports([['$renderer', '$renderer', true]], custom_renderer_module));
@@ -162,10 +162,7 @@ export function client_component(analysis, options) {
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
 		is_instance: false,
-		hoisted: [
-			...custom_renderer_imports(analysis.custom_renderer),
-			...analysis.instance_body.hoisted
-		],
+		hoisted: [...get_imports(analysis.custom_renderer), ...analysis.instance_body.hoisted],
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),

From 7012a4d633198878bba6576ee067cd344e2f8dae Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 11 Apr 2026 10:50:05 +0200
Subject: [PATCH 80/88] chore: revert custom element `shadow` types

---
 packages/svelte/src/compiler/types/template.d.ts | 2 +-
 packages/svelte/types/index.d.ts                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 08d348fb2f..c2c79f2b57 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -88,7 +88,7 @@ export namespace AST {
 		customRenderer?: string;
 		customElement?: {
 			tag?: string;
-			shadow?: 'open' | 'none';
+			shadow?: 'open' | 'none' | ObjectExpression | undefined;
 			props?: Record<
 				string,
 				{
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index fecbcda419..741c2babc2 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1251,7 +1251,7 @@ declare module 'svelte/compiler' {
 			customRenderer?: string;
 			customElement?: {
 				tag?: string;
-				shadow?: 'open' | 'none';
+				shadow?: 'open' | 'none' | ObjectExpression | undefined;
 				props?: Record<
 					string,
 					{

From 2a4af72fdb8d9665e7ed778e739612420d42aba4 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 11 Apr 2026 10:56:37 +0200
Subject: [PATCH 81/88] chore: move Renderer type to `.d.ts`

---
 .../internal/client/custom-renderer/index.js  |  29 +---
 .../internal/client/custom-renderer/state.js  |   2 +-
 .../client/custom-renderer/types.d.ts         |  88 +++++++++++
 .../internal/client/dom/blocks/branches.js    |   2 +-
 packages/svelte/types/index.d.ts              | 148 ++++++++++--------
 5 files changed, 170 insertions(+), 99 deletions(-)
 create mode 100644 packages/svelte/src/internal/client/custom-renderer/types.d.ts

diff --git a/packages/svelte/src/internal/client/custom-renderer/index.js b/packages/svelte/src/internal/client/custom-renderer/index.js
index 96667d213a..8e5ee011d8 100644
--- a/packages/svelte/src/internal/client/custom-renderer/index.js
+++ b/packages/svelte/src/internal/client/custom-renderer/index.js
@@ -1,4 +1,5 @@
 /** @import { ComponentContext } from '#client' */
+/** @import { Renderer } from "./types.js" */
 /** @import { Component, ComponentType, SvelteComponent } from '../../../index.js' */
 import { boundary } from '../dom/blocks/boundary.js';
 import { branch, effect_root } from '../reactivity/effects.js';
@@ -6,34 +7,6 @@ import { push, pop, component_context } from '../context.js';
 import { push_renderer } from './state.js';
 import { get_parent_node, remove_child } from '../dom/operations.js';
 
-/**
- * @template {object} [TFragment=object]
- * @template {object} [TElement=object]
- * @template {object} [TTextNode=object]
- * @template {object} [TComment=object]
- * @template [TNode=TFragment | TElement | TTextNode | TComment]
- * @typedef {Object} Renderer
- * @property {()=>TFragment} createFragment - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
- * @property {(name: string)=>TElement} createElement - Creates an element with the given name.
- * @property {(data: string)=>TTextNode} createTextNode - Creates a text node with the given data.
- * @property {(data: string)=>TComment} createComment - Creates a comment node with the given data. This is often used as an anchor for inserting elements, it doesn't necessarily need to be rendered
- * @property {(node: TNode)=> "fragment" | "element" | "text" | "comment"} nodeType - Should return the type of the node in string form ("fragment", "element", "text", "comment").
- * @property {(node: TTextNode | TComment)=>string | null} getNodeValue - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
- * @property {(element: TElement, name: string)=>string | null} getAttribute - Return the value of the attribute with the given name on the element, or null if it doesn't exist
- * @property {(element: TElement, key: string, value: any)=>void} setAttribute - Set the attribute with the given name and value on the element
- * @property {(element: TElement, name: string)=>void} removeAttribute - Remove the attribute with the given name from the element
- * @property {(element: TElement, name: string)=>boolean} hasAttribute - Return true if the element has an attribute with the given name
- * @property {(node: TElement | TTextNode | TComment, text: string)=>void} setText - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
- * @property {(element: TElement | TFragment)=>TNode | null} getFirstChild - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
- * @property {(element: TElement | TFragment)=>TNode | null} getLastChild - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
- * @property {(node: TElement | TTextNode | TComment)=>TNode | null} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
- * @property {(parent: TElement | TFragment, element: TNode, anchor: TElement | TTextNode | TComment | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
- * @property {(node: TElement | TTextNode | TComment)=>void} remove - Remove the node from the tree
- * @property {(element: TElement | TTextNode | TComment)=>TNode | null} getParent - Return the parent of the element, or null if it has no parent
- * @property {(target: TElement, type: string, handler: any, options?: any)=>void} addEventListener - Add an event listener of the given type and handler to the target node, with optional options
- * @property {(target: TElement, type: string, handler: any, options?: any)=>void} removeEventListener - Remove an event listener of the given type and handler from the target node, with optional options
- */
-
 /**
  * @template {object} [TFragment=object]
  * @template {object} [TElement=object]
diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index a46e03f3eb..ecaf7f0759 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -1,5 +1,5 @@
 /**
- * @import { Renderer } from ".";
+ * @import { Renderer } from "./types.js";
  */
 
 /**
diff --git a/packages/svelte/src/internal/client/custom-renderer/types.d.ts b/packages/svelte/src/internal/client/custom-renderer/types.d.ts
new file mode 100644
index 0000000000..81570b6b78
--- /dev/null
+++ b/packages/svelte/src/internal/client/custom-renderer/types.d.ts
@@ -0,0 +1,88 @@
+export type NodeType = 'fragment' | 'element' | 'text' | 'comment';
+
+export type Renderer<
+	TFragment extends object = object,
+	TElement extends object = object,
+	TTextNode extends object = object,
+	TComment extends object = object,
+	TNode extends TFragment | TElement | TTextNode | TComment =
+		| TFragment
+		| TElement
+		| TTextNode
+		| TComment
+> = {
+	/** Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of its children. */
+	createFragment(): TFragment;
+
+	/** Creates an element with the given name. */
+	createElement(name: string): TElement;
+
+	/** Creates a text node with the given data. */
+	createTextNode(data: string): TTextNode;
+
+	/**
+	 * Creates a comment node with the given data.
+	 * This is often used as an anchor for inserting elements; it doesn't necessarily need to be rendered.
+	 */
+	createComment(data: string): TComment;
+
+	/** Should return the type of the node in string form. */
+	nodeType(node: TNode): NodeType;
+
+	/**
+	 * Return the value of the node:
+	 * - text value of a text node
+	 * - data value of a comment
+	 * - null for elements and fragments
+	 */
+	getNodeValue(node: TTextNode | TComment): string | null;
+
+	/** Return the value of the attribute with the given name on the element, or null if it doesn't exist. */
+	getAttribute(element: TElement, name: string): string | null;
+
+	/** Set the attribute with the given name and value on the element. */
+	setAttribute(element: TElement, key: string, value: any): void;
+
+	/** Remove the attribute with the given name from the element. */
+	removeAttribute(element: TElement, name: string): void;
+
+	/** Return true if the element has an attribute with the given name. */
+	hasAttribute(element: TElement, name: string): boolean;
+
+	/**
+	 * Set the text content of the node to the given value.
+	 * This should work for both text nodes and elements.
+	 */
+	setText(node: TElement | TTextNode | TComment, text: string): void;
+
+	/** Return the first child of the element or fragment, or null if it has no children. */
+	getFirstChild(element: TElement | TFragment): TNode | null;
+
+	/** Return the last child of the element or fragment, or null if it has no children. */
+	getLastChild(element: TElement | TFragment): TNode | null;
+
+	/** Return the next sibling of the node, or null if it has no next sibling. */
+	getNextSibling(node: TElement | TTextNode | TComment): TNode | null;
+
+	/**
+	 * Insert the element into the parent before the anchor.
+	 * If anchor is null, insert at the end.
+	 */
+	insert(
+		parent: TElement | TFragment,
+		element: TNode,
+		anchor: TElement | TTextNode | TComment | null
+	): void;
+
+	/** Remove the node from the tree. */
+	remove(node: TElement | TTextNode | TComment): void;
+
+	/** Return the parent of the element, or null if it has no parent. */
+	getParent(element: TElement | TTextNode | TComment): TNode | null;
+
+	/** Add an event listener of the given type and handler to the target node. */
+	addEventListener(target: TElement, type: string, handler: any, options?: any): void;
+
+	/** Remove an event listener of the given type and handler from the target node. */
+	removeEventListener(target: TElement, type: string, handler: any, options?: any): void;
+};
diff --git a/packages/svelte/src/internal/client/dom/blocks/branches.js b/packages/svelte/src/internal/client/dom/blocks/branches.js
index 5173bd9243..3a39c291ef 100644
--- a/packages/svelte/src/internal/client/dom/blocks/branches.js
+++ b/packages/svelte/src/internal/client/dom/blocks/branches.js
@@ -1,5 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
-/** @import { Renderer } from '../../custom-renderer' */
+/** @import { Renderer } from '../../custom-renderer/types.js' */
 import { Batch, current_batch } from '../../reactivity/batch.js';
 import {
 	branch,
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 741c2babc2..d555f63489 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2582,83 +2582,93 @@ declare module 'svelte/renderer' {
 			unmount: () => void;
 		};
 	};
-	export type Renderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object, TNode = TFragment | TElement | TTextNode | TComment> = {
-		/**
-		 * - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
-		 */
-		createFragment: () => TFragment;
-		/**
-		 * - Creates an element with the given name.
-		 */
-		createElement: (name: string) => TElement;
-		/**
-		 * - Creates a text node with the given data.
-		 */
-		createTextNode: (data: string) => TTextNode;
-		/**
-		 * - Creates a comment node with the given data. This is often used as an anchor for inserting elements, it doesn't necessarily need to be rendered
-		 */
-		createComment: (data: string) => TComment;
-		/**
-		 * - Should return the type of the node in string form ("fragment", "element", "text", "comment").
-		 */
-		nodeType: (node: TNode) => "fragment" | "element" | "text" | "comment";
-		/**
-		 * - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
-		 */
-		getNodeValue: (node: TTextNode | TComment) => string | null;
-		/**
-		 * - Return the value of the attribute with the given name on the element, or null if it doesn't exist
-		 */
-		getAttribute: (element: TElement, name: string) => string | null;
-		/**
-		 * - Set the attribute with the given name and value on the element
-		 */
-		setAttribute: (element: TElement, key: string, value: any) => void;
-		/**
-		 * - Remove the attribute with the given name from the element
-		 */
-		removeAttribute: (element: TElement, name: string) => void;
-		/**
-		 * - Return true if the element has an attribute with the given name
-		 */
-		hasAttribute: (element: TElement, name: string) => boolean;
-		/**
-		 * - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
-		 */
-		setText: (node: TElement | TTextNode | TComment, text: string) => void;
-		/**
-		 * - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
-		 */
-		getFirstChild: (element: TElement | TFragment) => TNode | null;
-		/**
-		 * - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
-		 */
-		getLastChild: (element: TElement | TFragment) => TNode | null;
-		/**
-		 * - Return the next sibling of the node, or null if it has no next sibling
-		 */
-		getNextSibling: (node: TElement | TTextNode | TComment) => TNode | null;
-		/**
-		 * - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
-		 */
-		insert: (parent: TElement | TFragment, element: TNode, anchor: TElement | TTextNode | TComment | null) => void;
+	type NodeType = 'fragment' | 'element' | 'text' | 'comment';
+
+	type Renderer<
+		TFragment extends object = object,
+		TElement extends object = object,
+		TTextNode extends object = object,
+		TComment extends object = object,
+		TNode extends TFragment | TElement | TTextNode | TComment =
+			| TFragment
+			| TElement
+			| TTextNode
+			| TComment
+	> = {
+		/** Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of its children. */
+		createFragment(): TFragment;
+
+		/** Creates an element with the given name. */
+		createElement(name: string): TElement;
+
+		/** Creates a text node with the given data. */
+		createTextNode(data: string): TTextNode;
+
 		/**
-		 * - Remove the node from the tree
+		 * Creates a comment node with the given data.
+		 * This is often used as an anchor for inserting elements; it doesn't necessarily need to be rendered.
 		 */
-		remove: (node: TElement | TTextNode | TComment) => void;
+		createComment(data: string): TComment;
+
+		/** Should return the type of the node in string form. */
+		nodeType(node: TNode): NodeType;
+
 		/**
-		 * - Return the parent of the element, or null if it has no parent
+		 * Return the value of the node:
+		 * - text value of a text node
+		 * - data value of a comment
+		 * - null for elements and fragments
 		 */
-		getParent: (element: TElement | TTextNode | TComment) => TNode | null;
+		getNodeValue(node: TTextNode | TComment): string | null;
+
+		/** Return the value of the attribute with the given name on the element, or null if it doesn't exist. */
+		getAttribute(element: TElement, name: string): string | null;
+
+		/** Set the attribute with the given name and value on the element. */
+		setAttribute(element: TElement, key: string, value: any): void;
+
+		/** Remove the attribute with the given name from the element. */
+		removeAttribute(element: TElement, name: string): void;
+
+		/** Return true if the element has an attribute with the given name. */
+		hasAttribute(element: TElement, name: string): boolean;
+
 		/**
-		 * - Add an event listener of the given type and handler to the target node, with optional options
+		 * Set the text content of the node to the given value.
+		 * This should work for both text nodes and elements.
 		 */
-		addEventListener: (target: TElement, type: string, handler: any, options?: any) => void;
+		setText(node: TElement | TTextNode | TComment, text: string): void;
+
+		/** Return the first child of the element or fragment, or null if it has no children. */
+		getFirstChild(element: TElement | TFragment): TNode | null;
+
+		/** Return the last child of the element or fragment, or null if it has no children. */
+		getLastChild(element: TElement | TFragment): TNode | null;
+
+		/** Return the next sibling of the node, or null if it has no next sibling. */
+		getNextSibling(node: TElement | TTextNode | TComment): TNode | null;
+
 		/**
-		 * - Remove an event listener of the given type and handler from the target node, with optional options
+		 * Insert the element into the parent before the anchor.
+		 * If anchor is null, insert at the end.
 		 */
-		removeEventListener: (target: TElement, type: string, handler: any, options?: any) => void;
+		insert(
+			parent: TElement | TFragment,
+			element: TNode,
+			anchor: TElement | TTextNode | TComment | null
+		): void;
+
+		/** Remove the node from the tree. */
+		remove(node: TElement | TTextNode | TComment): void;
+
+		/** Return the parent of the element, or null if it has no parent. */
+		getParent(element: TElement | TTextNode | TComment): TNode | null;
+
+		/** Add an event listener of the given type and handler to the target node. */
+		addEventListener(target: TElement, type: string, handler: any, options?: any): void;
+
+		/** Remove an event listener of the given type and handler from the target node. */
+		removeEventListener(target: TElement, type: string, handler: any, options?: any): void;
 	};
 	/**
 	 * @deprecated In Svelte 4, components are classes. In Svelte 5, they are functions.

From a2ccdc4f475fc7b6f53350a13bf4561f3c271f02 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 11 Apr 2026 10:59:15 +0200
Subject: [PATCH 82/88] chore: adhere to naming conventions

---
 .../internal/client/custom-renderer/state.js  |  26 +--
 .../src/internal/client/dev/validation.js     |   4 +-
 .../internal/client/dom/blocks/branches.js    |   2 +-
 .../src/internal/client/dom/blocks/each.js    |  10 +-
 .../src/internal/client/dom/blocks/snippet.js |   6 +-
 .../client/dom/elements/attributes.js         |  21 +--
 .../internal/client/dom/elements/events.js    |   6 +-
 .../src/internal/client/dom/operations.js     | 162 +++++++++---------
 .../src/internal/client/dom/template.js       |   6 +-
 .../src/internal/client/reactivity/async.js   |   4 +-
 .../src/internal/client/reactivity/effects.js |   4 +-
 11 files changed, 128 insertions(+), 123 deletions(-)

diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index ecaf7f0759..6c8555b0a1 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -5,27 +5,27 @@
 /**
  * @type {Renderer<any, any, any, any> | null}
  */
-export let renderer = null;
+export let current_renderer = null;
 
 // allow for a "window" for each custom renderer...to use with `$props.id`
 export let custom_renderer_window_map = new WeakMap();
 
 /**
- * @param {Renderer<any, any, any, any> | null} $renderer
+ * @param {Renderer<any, any, any, any> | null} value
  */
-export function set_renderer($renderer) {
-	renderer = $renderer;
+export function set_renderer(value) {
+	current_renderer = value;
 }
 
 /**
  *
- * @param {Renderer<any, any, any, any>} $renderer
+ * @param {Renderer<any, any, any, any> | null} value
  */
-export function push_renderer($renderer) {
-	let old_renderer = renderer;
-	renderer = $renderer;
+export function push_renderer(value) {
+	let old_renderer = current_renderer;
+	current_renderer = value;
 	return () => {
-		renderer = old_renderer;
+		current_renderer = old_renderer;
 	};
 }
 
@@ -35,12 +35,12 @@ export function push_renderer($renderer) {
  * @returns {T}
  */
 export function without_renderer(fn) {
-	if (renderer === null) return fn();
-	let old_renderer = renderer;
-	renderer = null;
+	if (current_renderer === null) return fn();
+	let previous_renderer = current_renderer;
+	current_renderer = null;
 	try {
 		return fn();
 	} finally {
-		renderer = old_renderer;
+		current_renderer = previous_renderer;
 	}
 }
diff --git a/packages/svelte/src/internal/client/dev/validation.js b/packages/svelte/src/internal/client/dev/validation.js
index ee27dbf70d..f7a9a4ec2f 100644
--- a/packages/svelte/src/internal/client/dev/validation.js
+++ b/packages/svelte/src/internal/client/dev/validation.js
@@ -1,11 +1,11 @@
-import { renderer } from '../custom-renderer/state.js';
+import { current_renderer } from '../custom-renderer/state.js';
 import * as e from '../errors.js';
 /**
  * @param {Node} anchor
  * @param {...(()=>any)[]} args
  */
 export function validate_snippet_args(anchor, ...args) {
-	if (!renderer && (typeof anchor !== 'object' || !(anchor instanceof Node))) {
+	if (!current_renderer && (typeof anchor !== 'object' || !(anchor instanceof Node))) {
 		e.invalid_snippet_arguments();
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/branches.js b/packages/svelte/src/internal/client/dom/blocks/branches.js
index 3a39c291ef..44e55f90fc 100644
--- a/packages/svelte/src/internal/client/dom/blocks/branches.js
+++ b/packages/svelte/src/internal/client/dom/blocks/branches.js
@@ -20,7 +20,7 @@ import {
 	get_last_child
 } from '../operations.js';
 import { DEV } from 'esm-env';
-import { push_renderer, renderer as current_renderer } from '../../custom-renderer/state.js';
+import { push_renderer, current_renderer } from '../../custom-renderer/state.js';
 
 /**
  * @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index b45f159bce..ce6dff2442 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -50,7 +50,7 @@ import { current_batch } from '../../reactivity/batch.js';
 import * as e from '../../errors.js';
 import { tag } from '../../dev/tracing.js';
 
-import { push_renderer, renderer } from '../../custom-renderer/state.js';
+import { push_renderer, current_renderer } from '../../custom-renderer/state.js';
 
 // When making substantive changes to this file, validate them with the each block stress test:
 // https://svelte.dev/playground/1972b2cf46564476ad8c8c6405b23b7b
@@ -184,17 +184,17 @@ var dom_weak_key = {};
  */
 function get_offscreen_anchor() {
 	// not doing it inline to please typescript
-	var cached = offscreen_anchors.get(renderer ?? dom_weak_key);
+	var cached = offscreen_anchors.get(current_renderer ?? dom_weak_key);
 	if (cached) return cached;
 
 	var offscreen_anchor = create_text();
 
-	if (renderer) {
+	if (current_renderer) {
 		var fragment = create_fragment();
 		append_child(fragment, offscreen_anchor);
 	}
 
-	offscreen_anchors.set(renderer ?? dom_weak_key, offscreen_anchor);
+	offscreen_anchors.set(current_renderer ?? dom_weak_key, offscreen_anchor);
 	return offscreen_anchor;
 }
 
@@ -219,7 +219,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	// Capture the renderer that was active when this each block was created.
 	// Needed so that the commit callback can push the correct renderer when doing
 	// DOM operations outside of an effect context (e.g. as a batch commit callback).
-	var captured_renderer = renderer;
+	var captured_renderer = current_renderer;
 
 	if (is_controlled) {
 		var parent_node = /** @type {Element} */ (node);
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index da25e8ce16..b9607cea33 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -16,7 +16,7 @@ import { DEV } from 'esm-env';
 import { get_first_child, get_next_sibling, insert_before, node_type } from '../operations.js';
 import { prevent_snippet_stringification } from '../../../shared/validate.js';
 import { BranchManager } from './branches.js';
-import { renderer } from '../../custom-renderer/state.js';
+import { current_renderer } from '../../custom-renderer/state.js';
 
 /**
  * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
@@ -73,7 +73,7 @@ export function wrap_snippet(component, fn) {
 export function renderer_snippet(expected_renderer, fn) {
 	var wrapped = /** @type {T} */ (
 		(.../** @type {any[]} */ args) => {
-			if (renderer !== expected_renderer) {
+			if (current_renderer !== expected_renderer) {
 				e.snippet_renderer_mismatch();
 			}
 			return fn(...args);
@@ -116,7 +116,7 @@ export function validate_snippet_renderer(expected_renderer, fn) {
 export function createRawSnippet(fn) {
 	// @ts-expect-error the types are a lie
 	return (/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
-		if (renderer != null) {
+		if (current_renderer != null) {
 			e.invalid_snippet_in_custom_renderer();
 		}
 		var snippet = fn(...params);
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index bddcadd019..f59eef69e1 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -35,7 +35,7 @@ import {
 	set_element_default_value,
 	set_element_default_checked
 } from '../operations.js';
-import { renderer } from '../../custom-renderer/state.js';
+import { current_renderer } from '../../custom-renderer/state.js';
 
 export const CLASS = Symbol('class');
 export const STYLE = Symbol('style');
@@ -364,7 +364,8 @@ function set_attributes(
 		}
 
 		if (key === 'class') {
-			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml' && renderer != null;
+			var is_html =
+				element.namespaceURI === 'http://www.w3.org/1999/xhtml' && current_renderer != null;
 			set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
 			current[key] = value;
 			current[CLASS] = next[CLASS];
@@ -395,7 +396,7 @@ function set_attributes(
 			const opts = {};
 			const event_handle_key = '$$' + key;
 			let event_name = key.slice(2);
-			var is_delegated = renderer == null && can_delegate_event(event_name);
+			var is_delegated = current_renderer == null && can_delegate_event(event_name);
 
 			if (is_capture_event(event_name)) {
 				event_name = event_name.slice(0, -7);
@@ -431,7 +432,7 @@ function set_attributes(
 			// avoid using the setter
 			set_attribute(element, key, value);
 		} else if (key === 'autofocus') {
-			if (renderer == null) {
+			if (current_renderer == null) {
 				autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
 			} else {
 				// In custom renderer mode, just set autofocus as a regular attribute
@@ -458,7 +459,7 @@ function set_attributes(
 
 			if (value == null && !is_custom_element && !is_default) {
 				attributes[key] = null;
-				if ((name === 'value' || name === 'checked') && renderer == null) {
+				if ((name === 'value' || name === 'checked') && current_renderer == null) {
 					// removing value/checked also removes defaultValue/defaultChecked — preserve
 					let input = /** @type {HTMLInputElement} */ (element);
 					const use_default = prev === undefined;
@@ -481,7 +482,7 @@ function set_attributes(
 						element.__value = null;
 					}
 				}
-			} else if (is_default && renderer != null) {
+			} else if (is_default && current_renderer != null) {
 				// Route through the renderer-aware abstraction so custom renderers
 				// see defaultValue/defaultChecked as proper attributes
 				if (name === 'defaultValue') {
@@ -609,7 +610,7 @@ var setters_cache = new Map();
 /** @param {Element} element */
 function get_setters(element) {
 	// if we have a custom renderer we just skip the check all together
-	if (renderer) return [];
+	if (current_renderer) return [];
 	var cache_key = get_attribute(element, 'is') || (node_name(element) ?? '');
 	var setters = setters_cache.get(cache_key);
 	if (setters) return setters;
@@ -642,7 +643,7 @@ function get_setters(element) {
  * @param {string} value
  */
 function check_src_in_dev_hydration(element, attribute, value) {
-	if (!DEV || renderer != null) return;
+	if (!DEV || current_renderer != null) return;
 	if (attribute === 'srcset' && srcset_url_equal(element, value)) return;
 	if (src_url_equal(get_attribute(element, attribute) ?? '', value)) return;
 
@@ -659,7 +660,7 @@ function check_src_in_dev_hydration(element, attribute, value) {
  * @returns {boolean}
  */
 function src_url_equal(element_src, url) {
-	if (element_src === url || renderer != null) return true;
+	if (element_src === url || current_renderer != null) return true;
 	return new URL(element_src, document.baseURI).href === new URL(url, document.baseURI).href;
 }
 
@@ -674,7 +675,7 @@ function split_srcset(srcset) {
  * @returns {boolean}
  */
 function srcset_url_equal(element, srcset) {
-	if (renderer != null) return true;
+	if (current_renderer != null) return true;
 	var element_urls = split_srcset(element.srcset);
 	var urls = split_srcset(srcset);
 
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index aaababd9a6..5885ff6d83 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -18,7 +18,7 @@ import {
 	remove_event_listener,
 	get_parent_node
 } from '../operations.js';
-import { renderer } from '../../custom-renderer/state.js';
+import { current_renderer } from '../../custom-renderer/state.js';
 
 /**
  * Used on elements, as a map of event type -> event handler,
@@ -65,7 +65,7 @@ export function replay_events(dom) {
 export function create_event(event_name, dom, handler, options = {}) {
 	// Capture whether a custom renderer is active at creation time (during mount),
 	// since `renderer` will be null when the event actually fires
-	var is_custom_renderer = renderer != null;
+	var is_custom_renderer = current_renderer != null;
 
 	/**
 	 * @this {EventTarget}
@@ -141,7 +141,7 @@ export function event(event_name, dom, handler, capture, passive) {
 
 	if (
 		// if there's a renderer we will never add to body, window or document.
-		renderer == null &&
+		current_renderer == null &&
 		(dom === document.body ||
 			// @ts-ignore
 			dom === window ||
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index ae6de8bf68..42caf652b7 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -13,7 +13,7 @@ import {
 } from '#client/constants';
 import { eager_block_effects } from '../reactivity/batch.js';
 import { NAMESPACE_HTML } from '../../../constants.js';
-import { custom_renderer_window_map, renderer } from '../custom-renderer/state.js';
+import { custom_renderer_window_map, current_renderer } from '../custom-renderer/state.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -84,7 +84,7 @@ export function init_operations() {
  * @returns {Text}
  */
 export function create_text(value = '') {
-	if (renderer) return /** @type {Text} */ (renderer.createTextNode(value));
+	if (current_renderer) return /** @type {Text} */ (current_renderer.createTextNode(value));
 	return document.createTextNode(value);
 }
 
@@ -94,7 +94,8 @@ export function create_text(value = '') {
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function get_first_child(node) {
-	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getFirstChild(node));
+	if (current_renderer)
+		return /** @type {TemplateNode | null} */ (current_renderer.getFirstChild(node));
 	return /** @type {TemplateNode | null} */ (first_child_getter.call(node));
 }
 
@@ -104,7 +105,8 @@ export function get_first_child(node) {
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function get_next_sibling(node) {
-	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getNextSibling(node));
+	if (current_renderer)
+		return /** @type {TemplateNode | null} */ (current_renderer.getNextSibling(node));
 	return /** @type {TemplateNode | null} */ (next_sibling_getter.call(node));
 }
 
@@ -223,11 +225,11 @@ export function sibling(node, count = 1, is_text = false) {
  * @returns {void}
  */
 export function clear_text_content(node) {
-	if (renderer) {
-		var child = renderer.getFirstChild(node);
+	if (current_renderer) {
+		var child = current_renderer.getFirstChild(node);
 		while (child !== null) {
-			var next = renderer.getNextSibling(child);
-			renderer.remove(child);
+			var next = current_renderer.getNextSibling(child);
+			current_renderer.remove(child);
 			child = next;
 		}
 		return;
@@ -257,9 +259,9 @@ export function should_defer_append() {
  * @returns {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element}
  */
 export function create_element(tag, namespace, is) {
-	if (renderer)
+	if (current_renderer)
 		return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
-			renderer.createElement(tag)
+			current_renderer.createElement(tag)
 		);
 	let options = is ? { is } : undefined;
 	return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
@@ -268,7 +270,7 @@ export function create_element(tag, namespace, is) {
 }
 
 export function create_fragment() {
-	if (renderer) return /** @type {DocumentFragment} */ (renderer.createFragment());
+	if (current_renderer) return /** @type {DocumentFragment} */ (current_renderer.createFragment());
 	return document.createDocumentFragment();
 }
 
@@ -277,7 +279,7 @@ export function create_fragment() {
  * @returns
  */
 export function create_comment(data = '') {
-	if (renderer) return /** @type {Comment} */ (renderer.createComment(data));
+	if (current_renderer) return /** @type {Comment} */ (current_renderer.createComment(data));
 	return document.createComment(data);
 }
 
@@ -288,8 +290,8 @@ export function create_comment(data = '') {
  * @returns
  */
 export function set_attribute(element, key, value = '') {
-	if (renderer) {
-		renderer.setAttribute(element, key, value);
+	if (current_renderer) {
+		current_renderer.setAttribute(element, key, value);
 		return;
 	}
 	if (key.startsWith('xlink:')) {
@@ -306,7 +308,7 @@ export function set_attribute(element, key, value = '') {
  */
 export function merge_text_nodes(text) {
 	// if we have a renderer we will not hydrate so we can skip this
-	if (renderer) return;
+	if (current_renderer) return;
 
 	if (/** @type {string} */ (text.nodeValue).length < 65536) {
 		return;
@@ -328,7 +330,7 @@ export function merge_text_nodes(text) {
  * @returns {node is Comment}
  */
 function is_comment(node) {
-	if (renderer) return !!node && node_type(node) === COMMENT_NODE;
+	if (current_renderer) return !!node && node_type(node) === COMMENT_NODE;
 	return node instanceof Comment;
 }
 
@@ -337,8 +339,8 @@ function is_comment(node) {
  */
 export function node_type(node) {
 	if (node == null) return undefined;
-	if (renderer) {
-		const type = renderer.nodeType(node);
+	if (current_renderer) {
+		const type = current_renderer.nodeType(node);
 		return CUSTOM_RENDERER_NODE_TYPE_MAP[type];
 	}
 	return node?.nodeType;
@@ -349,7 +351,7 @@ export function node_type(node) {
  */
 export function node_name(node) {
 	if (node == null) return undefined;
-	if (renderer) {
+	if (current_renderer) {
 		// for custom renderers we don't need to return the node name since all the
 		// checks that we do on specific node names are meant to be for the HTML
 		return '';
@@ -362,7 +364,8 @@ export function node_name(node) {
  * @returns {TemplateNode | null}
  */
 export function get_last_child(node) {
-	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getLastChild(node));
+	if (current_renderer)
+		return /** @type {TemplateNode | null} */ (current_renderer.getLastChild(node));
 	return /** @type {TemplateNode | null} */ (node.lastChild);
 }
 
@@ -371,7 +374,8 @@ export function get_last_child(node) {
  * @returns {TemplateNode | null}
  */
 export function get_parent_node(node) {
-	if (renderer) return /** @type {TemplateNode | null} */ (renderer.getParent(node));
+	if (current_renderer)
+		return /** @type {TemplateNode | null} */ (current_renderer.getParent(node));
 	return /** @type {TemplateNode | null} */ (node.parentNode);
 }
 
@@ -381,8 +385,8 @@ export function get_parent_node(node) {
  * @returns {Node}
  */
 export function append_child(parent, child) {
-	if (renderer) {
-		renderer.insert(parent, child, null);
+	if (current_renderer) {
+		current_renderer.insert(parent, child, null);
 		return child;
 	}
 	return parent.appendChild(child);
@@ -394,9 +398,9 @@ export function append_child(parent, child) {
  * @param {Node} new_node
  */
 export function insert_before(ref_node, new_node) {
-	if (renderer) {
-		var parent = renderer.getParent(ref_node);
-		renderer.insert(parent, new_node, ref_node);
+	if (current_renderer) {
+		var parent = current_renderer.getParent(ref_node);
+		current_renderer.insert(parent, new_node, ref_node);
 		return;
 	}
 	ref_node.before(new_node);
@@ -408,10 +412,10 @@ export function insert_before(ref_node, new_node) {
  * @param {Node} new_node
  */
 export function insert_after(ref_node, new_node) {
-	if (renderer) {
-		var parent = renderer.getParent(ref_node);
-		var next = renderer.getNextSibling(ref_node);
-		renderer.insert(parent, new_node, next);
+	if (current_renderer) {
+		var parent = current_renderer.getParent(ref_node);
+		var next = current_renderer.getNextSibling(ref_node);
+		current_renderer.insert(parent, new_node, next);
 		return;
 	}
 	ref_node.after(new_node);
@@ -421,8 +425,8 @@ export function insert_after(ref_node, new_node) {
  * @param {ChildNode} node
  */
 export function remove_node(node) {
-	if (renderer) {
-		renderer.remove(node);
+	if (current_renderer) {
+		current_renderer.remove(node);
 		return;
 	}
 	node.remove();
@@ -434,8 +438,8 @@ export function remove_node(node) {
  * @returns {ChildNode}
  */
 export function remove_child(parent, child) {
-	if (renderer) {
-		renderer.remove(child);
+	if (current_renderer) {
+		current_renderer.remove(child);
 		return child;
 	}
 	return /** @type {ChildNode} */ (parent.removeChild(child));
@@ -446,10 +450,10 @@ export function remove_child(parent, child) {
  * @param {Node} new_node
  */
 export function replace_with(old_node, new_node) {
-	if (renderer) {
-		var parent = renderer.getParent(old_node);
-		renderer.insert(parent, new_node, old_node);
-		renderer.remove(old_node);
+	if (current_renderer) {
+		var parent = current_renderer.getParent(old_node);
+		current_renderer.insert(parent, new_node, old_node);
+		current_renderer.remove(old_node);
 		return;
 	}
 	old_node.replaceWith(new_node);
@@ -460,8 +464,8 @@ export function replace_with(old_node, new_node) {
  * @param {string} value
  */
 export function set_text_content(node, value) {
-	if (renderer) {
-		renderer.setText(node, value);
+	if (current_renderer) {
+		current_renderer.setText(node, value);
 		return;
 	}
 	node.textContent = value;
@@ -472,8 +476,8 @@ export function set_text_content(node, value) {
  * @param {string} value
  */
 export function set_node_value(node, value) {
-	if (renderer) {
-		renderer.setText(node, value);
+	if (current_renderer) {
+		current_renderer.setText(node, value);
 		return;
 	}
 	node.nodeValue = value;
@@ -537,7 +541,7 @@ function remove_style_property_in_string(style_string, property) {
  * @returns {string | null}
  */
 export function get_node_value(node) {
-	if (renderer) return renderer.getNodeValue(node);
+	if (current_renderer) return current_renderer.getNodeValue(node);
 	return node.nodeValue;
 }
 
@@ -547,8 +551,8 @@ export function get_node_value(node) {
  * @param {any} value
  */
 export function set_element_value(element, value) {
-	if (renderer) {
-		renderer.setAttribute(element, 'value', value ?? '');
+	if (current_renderer) {
+		current_renderer.setAttribute(element, 'value', value ?? '');
 		return;
 	}
 	// @ts-expect-error
@@ -561,11 +565,11 @@ export function set_element_value(element, value) {
  * @param {boolean} checked
  */
 export function set_element_checked(element, checked) {
-	if (renderer) {
+	if (current_renderer) {
 		if (checked) {
-			renderer.setAttribute(element, 'checked', '');
+			current_renderer.setAttribute(element, 'checked', '');
 		} else {
-			renderer.removeAttribute(element, 'checked');
+			current_renderer.removeAttribute(element, 'checked');
 		}
 		return;
 	}
@@ -580,8 +584,8 @@ export function set_element_checked(element, checked) {
  * @param {string} value
  */
 export function set_element_default_value(element, value) {
-	if (renderer) {
-		renderer.setAttribute(element, 'defaultValue', value);
+	if (current_renderer) {
+		current_renderer.setAttribute(element, 'defaultValue', value);
 		return;
 	}
 	// @ts-expect-error
@@ -599,11 +603,11 @@ export function set_element_default_value(element, value) {
  * @param {boolean} checked
  */
 export function set_element_default_checked(element, checked) {
-	if (renderer) {
+	if (current_renderer) {
 		if (checked) {
-			renderer.setAttribute(element, 'defaultChecked', '');
+			current_renderer.setAttribute(element, 'defaultChecked', '');
 		} else {
-			renderer.removeAttribute(element, 'defaultChecked');
+			current_renderer.removeAttribute(element, 'defaultChecked');
 		}
 		return;
 	}
@@ -621,7 +625,7 @@ export function set_element_default_checked(element, checked) {
  * @returns {string | null}
  */
 export function get_attribute(element, name) {
-	if (renderer) return renderer.getAttribute(element, name);
+	if (current_renderer) return current_renderer.getAttribute(element, name);
 	return element.getAttribute(name);
 }
 
@@ -630,8 +634,8 @@ export function get_attribute(element, name) {
  * @param {string} name
  */
 export function remove_attribute(element, name) {
-	if (renderer) {
-		renderer.removeAttribute(element, name);
+	if (current_renderer) {
+		current_renderer.removeAttribute(element, name);
 		return;
 	}
 	element.removeAttribute(name);
@@ -643,7 +647,7 @@ export function remove_attribute(element, name) {
  * @returns {boolean}
  */
 export function has_attribute(element, name) {
-	if (renderer) return renderer.hasAttribute(element, name);
+	if (current_renderer) return current_renderer.hasAttribute(element, name);
 	return element.hasAttribute(name);
 }
 
@@ -652,7 +656,7 @@ export function has_attribute(element, name) {
  * @param {string} value
  */
 export function set_inner_html(element, value) {
-	if (renderer) {
+	if (current_renderer) {
 		throw new Error('setInnerHTML is not supported with custom renderers');
 	}
 	element.innerHTML = value;
@@ -664,7 +668,7 @@ export function set_inner_html(element, value) {
  * @returns {Node}
  */
 export function clone_node(node, deep) {
-	if (renderer) {
+	if (current_renderer) {
 		throw new Error('cloneNode is not supported with custom renderers');
 	}
 	return node.cloneNode(deep);
@@ -676,7 +680,7 @@ export function clone_node(node, deep) {
  * @returns {Node}
  */
 export function import_node(node, deep) {
-	if (renderer) {
+	if (current_renderer) {
 		throw new Error('importNode is not supported with custom renderers');
 	}
 	return document.importNode(node, deep);
@@ -689,8 +693,8 @@ export function import_node(node, deep) {
  * @param {boolean | AddEventListenerOptions} [options]
  */
 export function add_event_listener(target, type, handler, options) {
-	if (renderer) {
-		renderer.addEventListener(target, type, handler, options);
+	if (current_renderer) {
+		current_renderer.addEventListener(target, type, handler, options);
 		return;
 	}
 	target.addEventListener(type, handler, options);
@@ -703,8 +707,8 @@ export function add_event_listener(target, type, handler, options) {
  * @param {boolean | EventListenerOptions} [options]
  */
 export function remove_event_listener(target, type, handler, options) {
-	if (renderer) {
-		renderer.removeEventListener(target, type, handler, options);
+	if (current_renderer) {
+		current_renderer.removeEventListener(target, type, handler, options);
 		return;
 	}
 	target.removeEventListener(type, handler, options);
@@ -716,7 +720,7 @@ export function remove_event_listener(target, type, handler, options) {
  * @returns {boolean}
  */
 export function dispatch_event(target, event) {
-	if (renderer) {
+	if (current_renderer) {
 		// is only used in SSR which is not a thing for custom renderers
 		throw new Error('dispatchEvent is not supported with custom renderers');
 	}
@@ -730,10 +734,10 @@ export function dispatch_event(target, event) {
  * @param {string} [priority]
  */
 export function style_set_property(element, property, value, priority) {
-	if (renderer) {
-		var style = renderer.getAttribute(element, 'style') || '';
+	if (current_renderer) {
+		var style = current_renderer.getAttribute(element, 'style') || '';
 		var updated = set_style_property_in_string(style, property, value, priority);
-		renderer.setAttribute(element, 'style', updated);
+		current_renderer.setAttribute(element, 'style', updated);
 		return;
 	}
 	element.style.setProperty(property, value, priority);
@@ -744,10 +748,10 @@ export function style_set_property(element, property, value, priority) {
  * @param {string} property
  */
 export function style_remove_property(element, property) {
-	if (renderer) {
-		var style = renderer.getAttribute(element, 'style') || '';
+	if (current_renderer) {
+		var style = current_renderer.getAttribute(element, 'style') || '';
 		var updated = remove_style_property_in_string(style, property);
-		renderer.setAttribute(element, 'style', updated);
+		current_renderer.setAttribute(element, 'style', updated);
 		return;
 	}
 	element.style.removeProperty(property);
@@ -758,8 +762,8 @@ export function style_remove_property(element, property) {
  * @param {string} value
  */
 export function set_css_text(element, value) {
-	if (renderer) {
-		renderer.setAttribute(element, 'style', value);
+	if (current_renderer) {
+		current_renderer.setAttribute(element, 'style', value);
 		return;
 	}
 	element.style.cssText = value;
@@ -771,8 +775,8 @@ export function set_css_text(element, value) {
  * @param {boolean} force
  */
 export function class_list_toggle(element, name, force) {
-	if (renderer) {
-		const classes = renderer.getAttribute(element, 'class')?.split(/\s+/) ?? [];
+	if (current_renderer) {
+		const classes = current_renderer.getAttribute(element, 'class')?.split(/\s+/) ?? [];
 		const has_class = classes.includes(name);
 		if (force === has_class) {
 			return;
@@ -785,18 +789,18 @@ export function class_list_toggle(element, name, force) {
 				classes.splice(index, 1);
 			}
 		}
-		renderer.setAttribute(element, 'class', classes.join(' '));
+		current_renderer.setAttribute(element, 'class', classes.join(' '));
 		return;
 	}
 	element.classList.toggle(name, force);
 }
 
 export function get_window() {
-	if (renderer) {
-		var custom_renderer_window = custom_renderer_window_map.get(renderer);
+	if (current_renderer) {
+		var custom_renderer_window = custom_renderer_window_map.get(current_renderer);
 		if (!custom_renderer_window) {
 			custom_renderer_window = {};
-			custom_renderer_window_map.set(renderer, custom_renderer_window);
+			custom_renderer_window_map.set(current_renderer, custom_renderer_window);
 		}
 		return custom_renderer_window;
 	}
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 50a468f961..8e5a25a1d9 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -40,7 +40,7 @@ import {
 	REACTION_RAN,
 	TEXT_NODE
 } from '#client/constants';
-import { renderer } from '../custom-renderer/state.js';
+import { current_renderer } from '../custom-renderer/state.js';
 
 const TEMPLATE_TAG = IS_XHTML ? 'template' : 'TEMPLATE';
 const SCRIPT_TAG = IS_XHTML ? 'script' : 'SCRIPT';
@@ -246,7 +246,7 @@ export function from_tree(structure, flags) {
 		// for the custom renderer we skip the cloning and create new nodes every time...a bit less efficient
 		// but save custom renderers implementors from having to implement importNode or cloneNode
 		// which can be a pain
-		if (node === undefined || renderer != null) {
+		if (node === undefined || current_renderer != null) {
 			const ns =
 				(flags & TEMPLATE_USE_SVG) !== 0
 					? NAMESPACE_SVG
@@ -259,7 +259,7 @@ export function from_tree(structure, flags) {
 		}
 
 		var clone = /** @type {TemplateNode} */ (
-			renderer != null
+			current_renderer != null
 				? node
 				: use_import_node || is_firefox
 					? import_node(node, true)
diff --git a/packages/svelte/src/internal/client/reactivity/async.js b/packages/svelte/src/internal/client/reactivity/async.js
index f5ebb7f08d..6e6c25a5dc 100644
--- a/packages/svelte/src/internal/client/reactivity/async.js
+++ b/packages/svelte/src/internal/client/reactivity/async.js
@@ -9,7 +9,7 @@ import {
 	set_dev_stack
 } from '../context.js';
 import { Boundary } from '../dom/blocks/boundary.js';
-import { renderer, set_renderer } from '../custom-renderer/state.js';
+import { current_renderer, set_renderer } from '../custom-renderer/state.js';
 import { invoke_error_boundary } from '../error-handling.js';
 import {
 	active_effect,
@@ -114,7 +114,7 @@ export function capture() {
 	var previous_reaction = active_reaction;
 	var previous_component_context = component_context;
 	var previous_batch = /** @type {Batch} */ (current_batch);
-	var previous_renderer = renderer;
+	var previous_renderer = current_renderer;
 
 	if (DEV) {
 		var previous_dev_stack = dev_stack;
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 29e15cc901..e2a21ed67e 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -46,7 +46,7 @@ import { Batch, collected_effects, current_batch } from './batch.js';
 import { flatten, increment_pending } from './async.js';
 import { without_reactive_context } from '../dom/elements/bindings/shared.js';
 import { set_signal_status } from './status.js';
-import { push_renderer, renderer } from '../custom-renderer/state.js';
+import { push_renderer, current_renderer } from '../custom-renderer/state.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -115,7 +115,7 @@ function create_effect(type, fn) {
 		teardown: null,
 		wv: 0,
 		ac: null,
-		r: renderer
+		r: current_renderer
 	};
 
 	if (DEV) {

From 8e6d68c1db550e1cefb341cb7df698b58a66ce05 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 11 Apr 2026 11:38:36 +0200
Subject: [PATCH 83/88] chore: move `custom_renderer` to `state.js`

---
 .../src/compiler/phases/2-analyze/index.js    |  4 +-
 .../2-analyze/visitors/AnimateDirective.js    |  3 +-
 .../phases/2-analyze/visitors/Attribute.js    |  3 +-
 .../2-analyze/visitors/BindDirective.js       |  3 +-
 .../2-analyze/visitors/ExpressionTag.js       |  3 +-
 .../phases/2-analyze/visitors/HtmlTag.js      |  3 +-
 .../phases/2-analyze/visitors/OnDirective.js  |  3 +-
 .../2-analyze/visitors/RegularElement.js      | 12 +++---
 .../phases/2-analyze/visitors/SvelteBody.js   |  3 +-
 .../2-analyze/visitors/SvelteDocument.js      |  3 +-
 .../2-analyze/visitors/SvelteElement.js       |  3 +-
 .../phases/2-analyze/visitors/SvelteHead.js   |  3 +-
 .../phases/2-analyze/visitors/SvelteWindow.js |  3 +-
 .../phases/2-analyze/visitors/Text.js         |  3 +-
 .../2-analyze/visitors/TransitionDirective.js |  3 +-
 .../2-analyze/visitors/shared/element.js      |  5 ++-
 .../3-transform/client/transform-client.js    | 19 ++++-----
 .../client/transform-template/index.js        |  6 +--
 .../client/visitors/RegularElement.js         | 40 ++++++-------------
 .../3-transform/client/visitors/RenderTag.js  |  5 ++-
 .../client/visitors/SnippetBlock.js           |  4 +-
 .../client/visitors/shared/component.js       |  4 +-
 .../client/visitors/shared/element.js         |  5 +--
 .../client/visitors/shared/fragment.js        |  3 +-
 .../server/visitors/RegularElement.js         |  8 ++--
 .../svelte/src/compiler/phases/types.d.ts     |  4 --
 packages/svelte/src/compiler/state.js         |  6 +++
 27 files changed, 81 insertions(+), 83 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 046d89a3c0..f4719251bd 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -482,7 +482,8 @@ export function analyze_component(root, source, options) {
 		component_name: name,
 		dev: options.dev,
 		rootDir: options.rootDir,
-		runes
+		runes,
+		custom_renderer: custom_renderer
 	});
 
 	// TODO remove all the ?? stuff, we don't need it now that we're validating the config
@@ -535,7 +536,6 @@ export function analyze_component(root, source, options) {
 		event_directive_node: null,
 		uses_event_attributes: false,
 		custom_element,
-		custom_renderer,
 		inject_styles: css === 'injected' || is_custom_element,
 		accessors:
 			is_custom_element ||
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
index e1e431cc8b..8c5b1a6953 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
@@ -1,13 +1,14 @@
 /** @import { Context } from '../types' */
 /** @import { AST } from '#compiler'; */
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 
 /**
  * @param {AST.AnimateDirective} node
  * @param {Context} context
  */
 export function AnimateDirective(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		e.incompatible_with_custom_renderer(node, '`animate:`');
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index f9e3e18724..2563eb6dcd 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { cannot_be_set_statically, can_delegate_event } from '../../../../utils.js';
 import { get_attribute_chunks, is_event_attribute } from '../../../utils/ast.js';
+import { custom_renderer } from '../../../state.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
@@ -60,7 +61,7 @@ export function Attribute(node, context) {
 			}
 
 			// we can't delegate event handlers in a non dom environment
-			if (!context.state.analysis.custom_renderer) {
+			if (!custom_renderer) {
 				node.metadata.delegated =
 					parent?.type === 'RegularElement' && can_delegate_event(node.name.slice(2));
 			}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 5701ed438d..2fe202b302 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -12,6 +12,7 @@ import { binding_properties } from '../../bindings.js';
 import fuzzymatch from '../../1-parse/utils/fuzzymatch.js';
 import { is_content_editable_binding, is_svg } from '../../../../utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import { custom_renderer } from '../../../state.js';
 
 /**
  * @param {AST.BindDirective} node
@@ -27,7 +28,7 @@ export function BindDirective(node, context) {
 		parent?.type === 'SvelteDocument' ||
 		parent?.type === 'SvelteBody'
 	) {
-		if (context.state.analysis.custom_renderer) {
+		if (custom_renderer) {
 			e.incompatible_with_custom_renderer(node, '`bind:`');
 		}
 		if (node.name in binding_properties) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index 519dee6a97..adc0d2d91d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
@@ -11,7 +12,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function ExpressionTag(node, context) {
 	const in_template = context.path.at(-1)?.type === 'Fragment';
 
-	if (in_template && context.state.parent_element && !context.state.analysis.custom_renderer) {
+	if (in_template && context.state.parent_element && !custom_renderer) {
 		const message = is_tag_valid_with_parent('#text', context.state.parent_element);
 		if (message) {
 			e.node_invalid_placement(node, message);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
index f5ba9cd3d3..55b0384105 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
@@ -3,13 +3,14 @@
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_opening_tag } from './shared/utils.js';
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 
 /**
  * @param {AST.HtmlTag} node
  * @param {Context} context
  */
 export function HtmlTag(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		e.incompatible_with_custom_renderer(node, '`@html`');
 	}
 	if (context.state.analysis.runes) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
index e9a3202505..f3f9c105b4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
+import { custom_renderer } from '../../../state.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
@@ -9,7 +10,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function OnDirective(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		e.incompatible_with_custom_renderer(node, '`on:`');
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 383cebcaf6..6c7f80e37f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -17,7 +17,7 @@ import { check_element } from './shared/a11y/index.js';
 import { validate_element } from './shared/element.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { object } from '../../../utils/ast.js';
-import { runes } from '../../../state.js';
+import { runes, custom_renderer } from '../../../state.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -26,7 +26,7 @@ import { runes } from '../../../state.js';
 export function RegularElement(node, context) {
 	validate_element(node, context);
 
-	if (!context.state.analysis.custom_renderer) {
+	if (!custom_renderer) {
 		check_element(node, context);
 	}
 
@@ -37,7 +37,7 @@ export function RegularElement(node, context) {
 	if (node.name === 'textarea' && node.fragment.nodes.length > 0) {
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'Attribute' && attribute.name === 'value') {
-				if (!context.state.analysis.custom_renderer) {
+				if (!custom_renderer) {
 					e.textarea_invalid_content(node);
 				}
 			}
@@ -117,7 +117,7 @@ export function RegularElement(node, context) {
 	// We mark the subtree as dynamic so parent elements properly include the child init code
 	if (
 		(is_customizable_select_element(node) || node.name === 'selectedcontent') &&
-		!context.state.analysis.custom_renderer
+		!custom_renderer
 	) {
 		// Mark the element's own fragment as dynamic so it's not treated as static
 		node.fragment.metadata.dynamic = true;
@@ -165,7 +165,7 @@ export function RegularElement(node, context) {
 		mark_subtree_dynamic(context.path);
 	}
 
-	if (context.state.parent_element && !context.state.analysis.custom_renderer) {
+	if (context.state.parent_element && !custom_renderer) {
 		let past_parent = false;
 		let only_warn = false;
 		const ancestors = [context.state.parent_element];
@@ -227,7 +227,7 @@ export function RegularElement(node, context) {
 		!is_void(node_name) &&
 		!is_svg(node_name) &&
 		!is_mathml(node_name) &&
-		!context.state.analysis.custom_renderer
+		!custom_renderer
 	) {
 		w.element_invalid_self_closing_tag(node, node.name);
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js
index 1bd353b689..2061664f6b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBody.js
@@ -1,6 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 import { is_event_attribute } from '../../../utils/ast.js';
 import { disallow_children } from './shared/special-element.js';
 
@@ -9,7 +10,7 @@ import { disallow_children } from './shared/special-element.js';
  * @param {Context} context
  */
 export function SvelteBody(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		e.incompatible_with_custom_renderer(node, '`<svelte:body>`');
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
index 067a228692..716ef01b8a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteDocument.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { disallow_children } from './shared/special-element.js';
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 import { is_event_attribute } from '../../../utils/ast.js';
 
 /**
@@ -9,7 +10,7 @@ import { is_event_attribute } from '../../../utils/ast.js';
  * @param {Context} context
  */
 export function SvelteDocument(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		e.incompatible_with_custom_renderer(node, '`<svelte:document>`');
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index 919ce897e0..c3f01cf6ab 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -5,6 +5,7 @@ import { is_text_attribute } from '../../../utils/ast.js';
 import { check_element } from './shared/a11y/index.js';
 import { validate_element } from './shared/element.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import { custom_renderer } from '../../../state.js';
 
 /**
  * @param {AST.SvelteElement} node
@@ -13,7 +14,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function SvelteElement(node, context) {
 	validate_element(node, context);
 
-	if (!context.state.analysis.custom_renderer) {
+	if (!custom_renderer) {
 		check_element(node, context);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
index 253074e6a7..4a70ea078d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
@@ -1,6 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
@@ -8,7 +9,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function SvelteHead(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		e.incompatible_with_custom_renderer(node, '`<svelte:head>`');
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
index ffaaa45258..2626a1bcea 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteWindow.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { disallow_children } from './shared/special-element.js';
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 import { is_event_attribute } from '../../../utils/ast.js';
 
 /**
@@ -9,7 +10,7 @@ import { is_event_attribute } from '../../../utils/ast.js';
  * @param {Context} context
  */
 export function SvelteWindow(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		e.incompatible_with_custom_renderer(node, '`<svelte:window>`');
 	}
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
index 410614531a..575fee7816 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
@@ -4,6 +4,7 @@ import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import { regex_bidirectional_control_characters, regex_not_whitespace } from '../../patterns.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
+import { custom_renderer } from '../../../state.js';
 import { extract_svelte_ignore } from '../../../utils/extract_svelte_ignore.js';
 
 /**
@@ -17,7 +18,7 @@ export function Text(node, context) {
 		parent.type === 'Fragment' &&
 		context.state.parent_element &&
 		regex_not_whitespace.test(node.data) &&
-		!context.state.analysis.custom_renderer
+		!custom_renderer
 	) {
 		const message = is_tag_valid_with_parent('#text', context.state.parent_element);
 		if (message) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
index 01a6229088..3b78997d2f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
@@ -1,6 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { custom_renderer } from '../../../state.js';
 
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
@@ -9,7 +10,7 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  * @param {Context} context
  */
 export function TransitionDirective(node, context) {
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		const directive = node.intro && node.outro ? '`transition:`' : node.intro ? '`in:`' : '`out:`';
 		e.incompatible_with_custom_renderer(node, directive);
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
index 925ea69dfb..959fa97fe9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
@@ -4,6 +4,7 @@ import { get_attribute_expression, is_expression_attribute } from '../../../../u
 import { regex_illegal_attribute_character } from '../../../patterns.js';
 import * as e from '../../../../errors.js';
 import * as w from '../../../../warnings.js';
+import { custom_renderer } from '../../../../state.js';
 import {
 	validate_attribute,
 	validate_attribute_name,
@@ -79,12 +80,12 @@ export function validate_element(node, context) {
 				validate_slot_attribute(context, attribute);
 			}
 
-			if (attribute.name === 'is' && !context.state.analysis.custom_renderer) {
+			if (attribute.name === 'is' && !custom_renderer) {
 				w.attribute_avoid_is(attribute);
 			}
 
 			const correct_name = react_attributes.get(attribute.name);
-			if (correct_name && !context.state.analysis.custom_renderer) {
+			if (correct_name && !custom_renderer) {
 				w.attribute_invalid_property_name(attribute, attribute.name, correct_name);
 			}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index a4f9b9dfce..8ec7002c7d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -6,7 +6,7 @@ import { walk } from 'zimmerframe';
 import * as b from '#compiler/builders';
 import { build_getter, is_state_source } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
-import { dev, filename } from '../../../state.js';
+import { dev, filename, custom_renderer } from '../../../state.js';
 import { AnimateDirective } from './visitors/AnimateDirective.js';
 import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
@@ -138,13 +138,10 @@ const visitors = {
 	VariableDeclaration
 };
 
-/**
- * @param {string | undefined} custom_renderer_module
- */
-function get_imports(custom_renderer_module) {
+function get_imports() {
 	const imports = [b.import_all('$', 'svelte/internal/client')];
-	if (custom_renderer_module) {
-		imports.push(b.imports([['$renderer', '$renderer', true]], custom_renderer_module));
+	if (custom_renderer) {
+		imports.push(b.imports([['$renderer', '$renderer', true]], custom_renderer));
 	}
 	return imports;
 }
@@ -162,7 +159,7 @@ export function client_component(analysis, options) {
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
 		is_instance: false,
-		hoisted: [...get_imports(analysis.custom_renderer), ...analysis.instance_body.hoisted],
+		hoisted: [...get_imports(), ...analysis.instance_body.hoisted],
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),
@@ -575,11 +572,11 @@ export function client_component(analysis, options) {
 
 	// disclose version attach the svelte version to `window` which is not guaranteed
 	// to be a thing in custom renderers environments
-	if (options.discloseVersion && !analysis.custom_renderer) {
+	if (options.discloseVersion && !custom_renderer) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
 
-	if (!analysis.custom_renderer) {
+	if (!custom_renderer) {
 		body.unshift(b.imports([], 'svelte/internal/init-operations'));
 	}
 
@@ -606,7 +603,7 @@ export function client_component(analysis, options) {
 		component_block.body.unshift(b.const(analysis.props_id, b.call('$.props_id')));
 	}
 
-	if (analysis.custom_renderer) {
+	if (custom_renderer) {
 		component_block.body.unshift(
 			b.var('$$pop_renderer', b.call('$.push_renderer', b.id('$renderer')))
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
index b81746a0e5..246824a447 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -2,7 +2,7 @@
 /** @import { ComponentClientTransformState } from '../types.js' */
 /** @import { Node } from './types.js' */
 import { TEMPLATE_USE_MATHML, TEMPLATE_USE_SVG } from '../../../../../constants.js';
-import { dev, locator } from '../../../../state.js';
+import { dev, locator, custom_renderer } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 
 /**
@@ -36,7 +36,7 @@ function build_locations(nodes) {
  */
 export function transform_template(state, namespace, flags = 0) {
 	// custom renderers needs a tree to work because there's no template element we can use
-	const tree = state.options.fragments === 'tree' || !!state.analysis.custom_renderer;
+	const tree = state.options.fragments === 'tree' || custom_renderer;
 
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
@@ -51,7 +51,7 @@ export function transform_template(state, namespace, flags = 0) {
 		flags ? b.literal(flags) : undefined
 	);
 
-	if (state.template.contains_script_tag && !state.analysis.custom_renderer) {
+	if (state.template.contains_script_tag && !custom_renderer) {
 		call = b.call(`$.with_script`, call);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 4dc6e26ffe..c2a306dc3e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -8,7 +8,7 @@ import {
 	is_dom_property,
 	is_load_error_element
 } from '../../../../../utils.js';
-import { is_ignored } from '../../../../state.js';
+import { is_ignored, custom_renderer } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import {
@@ -39,9 +39,7 @@ import { TEMPLATE_FRAGMENT } from '../../../../../constants.js';
  */
 export function RegularElement(node, context) {
 	const is_html =
-		context.state.metadata.namespace === 'html' &&
-		node.name !== 'svg' &&
-		!context.state.analysis.custom_renderer;
+		context.state.metadata.namespace === 'html' && node.name !== 'svg' && !custom_renderer;
 	const name = is_html ? node.name.toLowerCase() : node.name;
 	context.state.template.push_element(name, node.start, is_html);
 
@@ -51,7 +49,7 @@ export function RegularElement(node, context) {
 	}
 
 	// we never treat elements as custom element in custom renderers, since we don't want to apply special handling to them (e.g. class merging)
-	const is_custom_element = is_custom_element_node(node) && !context.state.analysis.custom_renderer;
+	const is_custom_element = is_custom_element_node(node) && !custom_renderer;
 
 	// cloneNode is faster, but it does not instantiate the underlying class of the
 	// custom element until the template is connected to the dom, which would
@@ -212,7 +210,7 @@ export function RegularElement(node, context) {
 
 	/** If true, needs `__value` for inputs */
 	const needs_special_value_handling =
-		!context.state.analysis.custom_renderer &&
+		!custom_renderer &&
 		(name === 'option' || name === 'select' || bindings.has('group') || bindings.has('checked'));
 
 	if (has_spread) {
@@ -236,7 +234,7 @@ export function RegularElement(node, context) {
 				continue;
 			}
 
-			const name = get_attribute_name(node, attribute, !!context.state.analysis.custom_renderer);
+			const name = get_attribute_name(node, attribute);
 
 			if (
 				!is_custom_element &&
@@ -258,7 +256,7 @@ export function RegularElement(node, context) {
 				if (name !== 'class' || value) {
 					context.state.template.set_prop(attribute.name, value === true ? '' : value);
 				}
-			} else if (name === 'autofocus' && !context.state.analysis.custom_renderer) {
+			} else if (name === 'autofocus' && !custom_renderer) {
 				let { value } = build_attribute_value(attribute.value, context);
 				context.state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
 			} else if (name === 'class') {
@@ -274,14 +272,7 @@ export function RegularElement(node, context) {
 					(value, metadata) => context.state.memoizer.add(value, metadata)
 				);
 
-				const update = build_element_attribute_update(
-					node,
-					node_id,
-					name,
-					value,
-					attributes,
-					!!context.state.analysis.custom_renderer
-				);
+				const update = build_element_attribute_update(node, node_id, name, value, attributes);
 
 				(has_state ? context.state.update : context.state.init).push(b.stmt(update));
 			}
@@ -357,7 +348,7 @@ export function RegularElement(node, context) {
 		const empty_string = value.type === 'Literal' && value.value === '';
 
 		if (!empty_string) {
-			if (context.state.analysis.custom_renderer) {
+			if (custom_renderer) {
 				// custom renderers need to use the method to invoke the renderer
 				context.state.template.push_text([
 					{
@@ -377,7 +368,7 @@ export function RegularElement(node, context) {
 				);
 			}
 		}
-	} else if (is_customizable_select_element(node) && !context.state.analysis.custom_renderer) {
+	} else if (is_customizable_select_element(node) && !custom_renderer) {
 		// For <option>, <optgroup>, or <select> elements with rich content, we need to branch based on browser support.
 		// Modern browsers preserve rich HTML in options, older browsers strip it to text only.
 		// We create a separate template for the rich content and append it to the element.
@@ -439,7 +430,7 @@ export function RegularElement(node, context) {
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
-		if (name === 'template' && !context.state.analysis.custom_renderer) {
+		if (name === 'template' && !custom_renderer) {
 			needs_reset = true;
 			child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
 			arg = b.member(arg, 'content');
@@ -476,7 +467,7 @@ export function RegularElement(node, context) {
 		context.state.after_update.push(...element_state.after_update);
 	}
 
-	if (name === 'selectedcontent' && !context.state.analysis.custom_renderer) {
+	if (name === 'selectedcontent' && !custom_renderer) {
 		context.state.init.push(
 			b.stmt(
 				b.call(
@@ -608,14 +599,7 @@ export function build_style_directives_object(
  * @param {Expression} value
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
  */
-function build_element_attribute_update(
-	element,
-	node_id,
-	name,
-	value,
-	attributes,
-	custom_renderer = false
-) {
+function build_element_attribute_update(element, node_id, name, value, attributes) {
 	if (name === 'muted' && !custom_renderer) {
 		// Special case for Firefox who needs it set as a property in order to work
 		return b.assignment('=', b.member(node_id, b.id('muted')), value);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
index dfe7349794..3283b03379 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
@@ -2,6 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { unwrap_optional } from '../../../../utils/ast.js';
+import { custom_renderer } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { add_svelte_meta, build_expression, Memoizer } from './shared/utils.js';
 
@@ -46,7 +47,7 @@ export function RenderTag(node, context) {
 	if (node.metadata.dynamic) {
 		// In custom renderer components, validate that the snippet is compatible
 		// with the current renderer before rendering it
-		if (context.state.analysis.custom_renderer) {
+		if (custom_renderer) {
 			snippet_function = b.call('$.validate_snippet_renderer', b.id('$renderer'), snippet_function);
 		}
 
@@ -65,7 +66,7 @@ export function RenderTag(node, context) {
 	} else {
 		// In custom renderer components, validate that the snippet is compatible
 		// with the current renderer before rendering it
-		if (context.state.analysis.custom_renderer) {
+		if (custom_renderer) {
 			snippet_function = b.call('$.validate_snippet_renderer', b.id('$renderer'), snippet_function);
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index ff11826aec..dc82192561 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -1,7 +1,7 @@
 /** @import { AssignmentPattern, BlockStatement, Expression, Identifier, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { dev } from '../../../../state.js';
+import { dev, custom_renderer } from '../../../../state.js';
 import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { get_value } from './shared/declarations.js';
@@ -81,7 +81,7 @@ export function SnippetBlock(node, context) {
 
 	// wrap snippets in components with a custom renderer so they can only be
 	// rendered by the same renderer that compiled them
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		snippet = b.call('$.renderer_snippet', b.id('$renderer'), snippet);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 1f732fb9f7..a354408686 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -1,7 +1,7 @@
 /** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, SourceLocation, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
-import { dev, is_ignored } from '../../../../../state.js';
+import { dev, is_ignored, custom_renderer } from '../../../../../state.js';
 import { get_attribute_chunks, object } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { add_svelte_meta, build_bind_this, Memoizer, validate_binding } from '../shared/utils.js';
@@ -456,7 +456,7 @@ export function build_component(node, component_name, loc, context) {
 		};
 	}
 
-	if (context.state.analysis.custom_renderer) {
+	if (custom_renderer) {
 		const prev = fn;
 		fn = (node_id) => {
 			return b.call('$.without_renderer', b.arrow([], prev(node_id)));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index d2d14d7da1..063f8b0231 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../../types' */
 import { escape_html } from '../../../../../../escaping.js';
 import { normalize_attribute } from '../../../../../../utils.js';
-import { is_ignored } from '../../../../../state.js';
+import { is_ignored, custom_renderer } from '../../../../../state.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
@@ -132,9 +132,8 @@ export function build_attribute_value(value, context, memoize = (value) => value
 /**
  * @param {AST.RegularElement | AST.SvelteElement} element
  * @param {AST.Attribute} attribute
- * @param {boolean} [custom_renderer]
  */
-export function get_attribute_name(element, attribute, custom_renderer) {
+export function get_attribute_name(element, attribute) {
 	if (!custom_renderer && !element.metadata.svg && !element.metadata.mathml) {
 		return normalize_attribute(attribute.name);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index b03095d943..c57d10bd35 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -2,6 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { cannot_be_set_statically } from '../../../../../../utils.js';
+import { custom_renderer } from '../../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { is_custom_element_node } from '../../../../nodes.js';
@@ -83,7 +84,7 @@ export function process_children(nodes, initial, is_element, context) {
 		if (has_state && !within_bound_contenteditable) {
 			context.state.update.push(update);
 		} else {
-			if (context.state.analysis.custom_renderer) {
+			if (custom_renderer) {
 				// custom renderers need to use the method to invoke the renderer
 				context.state.init.push(update);
 			} else {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 963acc1ca5..6b4db1e819 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -3,7 +3,7 @@
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
 /** @import { Scope } from '../../../scope.js' */
 import { is_void } from '../../../../../utils.js';
-import { dev, locator } from '../../../../state.js';
+import { dev, locator, custom_renderer } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_element_attributes, prepare_element_spread_object } from './shared/element.js';
@@ -110,7 +110,7 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (is_customizable_select_element(node) && !context.state.analysis.custom_renderer) {
+		if (is_customizable_select_element(node) && !custom_renderer) {
 			rest.push(b.true);
 		}
 
@@ -157,7 +157,7 @@ export function RegularElement(node, context) {
 
 		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
 
-		if (is_customizable_select_element(node) && !context.state.analysis.custom_renderer) {
+		if (is_customizable_select_element(node) && !custom_renderer) {
 			rest.push(b.true);
 		}
 
@@ -195,7 +195,7 @@ export function RegularElement(node, context) {
 		if (
 			(name === 'optgroup' || name === 'select') &&
 			is_customizable_select_element(node) &&
-			!context.state.analysis.custom_renderer
+			!custom_renderer
 		) {
 			state.template.push(b.literal('<!>'));
 		}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index 54c90ff949..a1a85ce145 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -100,10 +100,6 @@ export interface ComponentAnalysis extends Analysis {
 	 * or if not present a boolean which corresponds to the compiler option value
 	 */
 	custom_element: boolean | AST.SvelteOptions['customElement'];
-	/**
-	 * The resolved custom renderer module path, or undefined if not using a custom renderer
-	 */
-	custom_renderer: string | undefined;
 	/** If `true`, should append styles through JavaScript */
 	inject_styles: boolean;
 	reactive_statements: Map<LabeledStatement, ReactiveStatement>;
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 5ae001ec50..094c53473b 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -46,6 +46,9 @@ export let dev;
 
 export let runes = false;
 
+/** @type {string | null | undefined} */
+export let custom_renderer = null;
+
 /** @type {(index: number) => Location} */
 export let locator;
 
@@ -139,6 +142,7 @@ export function is_ignored(node, code) {
 export function reset(state) {
 	dev = false;
 	runes = false;
+	custom_renderer = null;
 	component_name = UNKNOWN_FILENAME;
 	source = '';
 	source_lines = [];
@@ -155,6 +159,7 @@ export function reset(state) {
  *   component_name?: string;
  *   rootDir?: string;
  *   runes: boolean;
+ *   custom_renderer?: string | null | undefined;
  * }} state
  */
 export function adjust(state) {
@@ -162,6 +167,7 @@ export function adjust(state) {
 
 	dev = state.dev;
 	runes = state.runes;
+	custom_renderer = state.custom_renderer;
 	component_name = state.component_name ?? UNKNOWN_FILENAME;
 
 	if (typeof root_dir === 'string' && filename.startsWith(root_dir)) {

From ba3dd5719ff3a419bfc680983ccc6fd8df480e20 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 11 Apr 2026 12:11:18 +0200
Subject: [PATCH 84/88] fix: import

---
 packages/svelte/src/internal/client/reactivity/types.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index caca990bd6..5f513ef1ad 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -7,7 +7,7 @@ import type {
 	TransitionManager
 } from '#client';
 import type { Boundary } from '../dom/blocks/boundary';
-import type { Renderer } from '../custom-renderer/index';
+import type { Renderer } from '../custom-renderer/types';
 
 export interface Signal {
 	/** Flags bitmask */

From 4b4a1341134836d3fddb75c46e116b50925511be Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 30 Apr 2026 10:07:02 +0200
Subject: [PATCH 85/88] chore: rename `captured_renderer`

---
 packages/svelte/src/internal/client/dom/blocks/each.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index ce6dff2442..6a5ed9f01f 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -219,7 +219,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	// Capture the renderer that was active when this each block was created.
 	// Needed so that the commit callback can push the correct renderer when doing
 	// DOM operations outside of an effect context (e.g. as a batch commit callback).
-	var captured_renderer = current_renderer;
+	var renderer = current_renderer;
 
 	if (is_controlled) {
 		var parent_node = /** @type {Element} */ (node);
@@ -265,7 +265,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			return;
 		}
 
-		var pop_renderer = captured_renderer !== null ? push_renderer(captured_renderer) : null;
+		var pop_renderer = renderer !== null ? push_renderer(renderer) : null;
 
 		state.pending.delete(batch);
 

From 2af595b31e08ace4e025db86de004f9a249e50ca Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 30 Apr 2026 12:28:13 +0200
Subject: [PATCH 86/88] chore: replace custom `window` management with
 `globalThis`

Co-authored-by: Copilot <copilot@github.com>
---
 packages/svelte/src/compiler/types/index.d.ts |  2 +-
 .../internal/client/custom-renderer/state.js  |  3 -
 .../src/internal/client/dom/operations.js     | 14 +---
 .../src/internal/client/dom/template.js       | 67 +++++++++----------
 .../svelte/src/internal/disclose-version.js   |  2 +-
 packages/svelte/types/index.d.ts              |  4 +-
 6 files changed, 36 insertions(+), 56 deletions(-)

diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 1164e05066..2813c782a9 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -148,7 +148,7 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 */
 	runes?: boolean | undefined | ((options: { filename: string }) => boolean | undefined);
 	/**
-	 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
+	 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `globalThis.__svelte.v`.
 	 *
 	 * @default true
 	 */
diff --git a/packages/svelte/src/internal/client/custom-renderer/state.js b/packages/svelte/src/internal/client/custom-renderer/state.js
index 6c8555b0a1..202885ab79 100644
--- a/packages/svelte/src/internal/client/custom-renderer/state.js
+++ b/packages/svelte/src/internal/client/custom-renderer/state.js
@@ -7,9 +7,6 @@
  */
 export let current_renderer = null;
 
-// allow for a "window" for each custom renderer...to use with `$props.id`
-export let custom_renderer_window_map = new WeakMap();
-
 /**
  * @param {Renderer<any, any, any, any> | null} value
  */
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 42caf652b7..48b071568f 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -13,7 +13,7 @@ import {
 } from '#client/constants';
 import { eager_block_effects } from '../reactivity/batch.js';
 import { NAMESPACE_HTML } from '../../../constants.js';
-import { custom_renderer_window_map, current_renderer } from '../custom-renderer/state.js';
+import { current_renderer } from '../custom-renderer/state.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -794,15 +794,3 @@ export function class_list_toggle(element, name, force) {
 	}
 	element.classList.toggle(name, force);
 }
-
-export function get_window() {
-	if (current_renderer) {
-		var custom_renderer_window = custom_renderer_window_map.get(current_renderer);
-		if (!custom_renderer_window) {
-			custom_renderer_window = {};
-			custom_renderer_window_map.set(current_renderer, custom_renderer_window);
-		}
-		return custom_renderer_window;
-	}
-	return window;
-}
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 8e5a25a1d9..13a74d8603 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -1,30 +1,12 @@
 /** @import { Effect, EffectNodes, TemplateNode } from '#client' */
 /** @import { TemplateStructure } from './types' */
-import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import {
-	create_text,
-	get_first_child,
-	get_next_sibling,
-	is_firefox,
-	create_element,
-	create_fragment,
-	create_comment,
-	set_attribute,
-	merge_text_nodes,
-	get_last_child,
-	import_node,
-	clone_node,
-	append_child,
-	insert_before,
-	set_text_content,
-	replace_with,
-	node_type,
-	get_node_value,
-	node_name,
-	get_window
-} from './operations.js';
-import { create_fragment_from_html } from './reconciler.js';
-import { active_effect } from '../runtime.js';
+	COMMENT_NODE,
+	DOCUMENT_FRAGMENT_NODE,
+	IS_XHTML,
+	REACTION_RAN,
+	TEXT_NODE
+} from '#client/constants';
 import {
 	NAMESPACE_MATHML,
 	NAMESPACE_SVG,
@@ -33,14 +15,30 @@ import {
 	TEMPLATE_USE_MATHML,
 	TEMPLATE_USE_SVG
 } from '../../../constants.js';
-import {
-	COMMENT_NODE,
-	DOCUMENT_FRAGMENT_NODE,
-	IS_XHTML,
-	REACTION_RAN,
-	TEXT_NODE
-} from '#client/constants';
 import { current_renderer } from '../custom-renderer/state.js';
+import { active_effect } from '../runtime.js';
+import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
+import {
+	append_child,
+	clone_node,
+	create_comment,
+	create_element,
+	create_fragment,
+	create_text,
+	get_first_child,
+	get_last_child,
+	get_node_value,
+	import_node,
+	insert_before,
+	is_firefox,
+	merge_text_nodes,
+	node_name,
+	node_type,
+	replace_with,
+	set_attribute,
+	set_text_content
+} from './operations.js';
+import { create_fragment_from_html } from './reconciler.js';
 
 const TEMPLATE_TAG = IS_XHTML ? 'template' : 'TEMPLATE';
 const SCRIPT_TAG = IS_XHTML ? 'script' : 'SCRIPT';
@@ -418,10 +416,7 @@ export function props_id() {
 		return id;
 	}
 
-	let window = get_window();
-
-	// This way we ensure the id is unique even across Svelte runtimes
-	(window.__svelte ??= {}).uid ??= 1;
+	/**@type {*}*/ (globalThis.__svelte ??= {}).uid ??= 1;
 
-	return `c${window.__svelte.uid++}`;
+	return `c${/**@type {*}*/ (globalThis.__svelte).uid++}`;
 }
diff --git a/packages/svelte/src/internal/disclose-version.js b/packages/svelte/src/internal/disclose-version.js
index 86c3482b5d..d51d82c89b 100644
--- a/packages/svelte/src/internal/disclose-version.js
+++ b/packages/svelte/src/internal/disclose-version.js
@@ -2,5 +2,5 @@ import { PUBLIC_VERSION } from '../version.js';
 
 if (typeof window !== 'undefined') {
 	// @ts-expect-error
-	((window.__svelte ??= {}).v ??= new Set()).add(PUBLIC_VERSION);
+	((globalThis.__svelte ??= {}).v ??= new Set()).add(PUBLIC_VERSION);
 }
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 2cd78cbc54..9c2e2ba2b9 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1105,7 +1105,7 @@ declare module 'svelte/compiler' {
 		 */
 		runes?: boolean | undefined | ((options: { filename: string }) => boolean | undefined);
 		/**
-		 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
+		 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `globalThis.__svelte.v`.
 		 *
 		 * @default true
 		 */
@@ -3398,7 +3398,7 @@ declare module 'svelte/types/compiler/interfaces' {
 		 */
 		runes?: boolean | undefined | ((options: { filename: string }) => boolean | undefined);
 		/**
-		 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
+		 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `globalThis.__svelte.v`.
 		 *
 		 * @default true
 		 */

From 1e62a1c6d4779d8baea390581708f310511d73cc Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 30 Apr 2026 12:30:13 +0200
Subject: [PATCH 87/88] fix: disclose version for custom renderers too

---
 .../compiler/phases/3-transform/client/transform-client.js    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 8ec7002c7d..05ad3b9278 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -570,9 +570,7 @@ export function client_component(analysis, options) {
 		body.unshift(b.imports([], 'svelte/internal/flags/tracing'));
 	}
 
-	// disclose version attach the svelte version to `window` which is not guaranteed
-	// to be a thing in custom renderers environments
-	if (options.discloseVersion && !custom_renderer) {
+	if (options.discloseVersion) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
 

From 2ee47cf01c234bf1d32e2c33ab4d39f86da312d9 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 30 Apr 2026 12:35:31 +0200
Subject: [PATCH 88/88] chore: fix ts

Co-authored-by: Copilot <copilot@github.com>
---
 packages/svelte/src/internal/client/dom/template.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 13a74d8603..9e68e7867f 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -415,8 +415,9 @@ export function props_id() {
 		hydrate_next();
 		return id;
 	}
+	// @ts-expect-error This way we ensure the id is unique even across Svelte runtimes
+	(globalThis.__svelte ??= {}).uid ??= 1;
 
-	/**@type {*}*/ (globalThis.__svelte ??= {}).uid ??= 1;
-
-	return `c${/**@type {*}*/ (globalThis.__svelte).uid++}`;
+	// @ts-expect-error
+	return `c${globalThis.__svelte.uid++}`;
 }