Repository: sveltejs/svelte
File: packages/svelte/src/internal/client/dom/elements/customizable-select.js (JavaScript)

Code before:
	if (!is_supported()) return;

	// we use the attach function directly just to make sure is executed when is mounted to the dom
	attach(element, () => () => {
		const select = /** @type {HTMLSelectElement | null} */ (find_in_path(element, 'SELECT'));
		if (select) {
			const observer = new MutationObserver((entries) => {
				// if the changes include SELECTEDCONTENT we don't need to do anything as it already changed
				if (
					entries.some(
						(el) => el.target instanceof HTMLElement && el.target.tagName === 'SELECTEDCONTENT'
					)
				) {
					return;
				}
				// if the changes doesn't include the selected options we don't need to do anything
				if (
					!entries.find((e) => {
						const option = /** @type {HTMLOptionElement | null} */ (
							find_in_path(e.target, 'OPTION')
						);
						return option && [...select.selectedOptions].includes(option);
					})
				) {
					return;
				}
				// otherwise we replace selectedcontent with a new element to trigger the browser
				// reclone of the selected option
				element.replaceWith((element = /** @type {HTMLElement} */ (element.cloneNode(true))));
				update_element(element);
			});

			observer.observe(select, {
				childList: true,
				characterData: true,
				subtree: true
			});

			teardown(() => {
				observer.disconnect();
			});
		}
	});
}

/**
 * Handles rich HTML content inside `<option>`, `<optgroup>`, or `<select>` elements with browser-specific branching.
 * Modern browsers preserve HTML inside options, while older browsers strip it to text only.
 *
 * @param {HTMLOptionElement | HTMLOptGroupElement | HTMLSelectElement} element The element to process
 * @param {() => void} rich_fn Function to process rich HTML content (modern browsers)

Review comment (suggestion):
```suggestion
				// if the changes doesn't include the selected `<option>` we don't need to do anything
				if (!entries.some((e) => e.target.parentElement?.closest('option')?.selected)) {
					return;
				}

```

Code after:
				selected ||= !!entry.target.parentElement?.closest('option')?.selected;
			}

			if (selected) {
				// replace the `<selectedcontent>` with a clone
				element.replaceWith((element = /** @type {HTMLElement} */ (element.cloneNode(true))));
				update_element(element);
			}
		});

		observer.observe(select, {
			childList: true,
			characterData: true,
			subtree: true
		});

		return () => {
			observer.disconnect();
		};
	});
}

/**
 * Handles rich HTML content inside `<option>`, `<optgroup>`, or `<select>` elements with browser-specific branching.
 * Modern browsers preserve HTML inside options, while older browsers strip it to text only.
 *
 * @param {HTMLOptionElement | HTMLOptGroupElement | HTMLSelectElement} element The element to process
 * @param {() => void} rich_fn Function to process rich HTML content (modern browsers)
 */
export function customizable_select(element, rich_fn) {
	var was_hydrating = hydrating;

	if (!is_supported()) {
		set_hydrating(false);
		element.textContent = '';
		element.append(create_comment(''));
	}

	try {
		rich_fn();
	} finally {
		if (was_hydrating) {
			if (hydrating) {
				reset(element);
			} else {
				set_hydrating(true);
				set_hydrate_node(element);
			}
		}
	}
}