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] 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