fix: un-special case customizable-select

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

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.

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('<!>'));
 		}
 	}

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>'
+});

packages/svelte/tests/custom-renderers/samples/customizable-select/main.svelte

@@ -0,0 +1,4 @@
+<select>
+	<selectedcontent></selectedcontent>
+	<option><span>Rich</span></option>
+</select>