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

Code before:
 * @param {Node} node
 * @param {string} tag_name
 */
function find_in_path(node, tag_name) {
	/**
	 * @type {HTMLElement | undefined | null}
	 */
	let parent = /** @type {HTMLElement} */ (node);
	while (parent && parent.tagName !== tag_name) {
		parent = parent.parentElement;
	}
	return parent;
}

/**
 *
 * @param {HTMLElement} element
 * @param {(new_element: HTMLElement) => void} update_element
 */
export function selectedcontent(element, update_element) {
	// if it's not supported no need for special logic
	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);

Review comment (suggestion):
```suggestion
		const select = element.closest('select');

```

Code after:
 * @param {(new_element: HTMLElement) => void} update_element
 */
export function selectedcontent(element, update_element) {
	// if it's not supported no need for special logic
	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 = element.closest('select');
		if (!select) return;

		const observer = new MutationObserver((entries) => {
			var selected = false;

			for (const entry of entries) {
				if (entry.target === element) {
					// the `<selectedcontent>` already changed, no need to replace it
					return;
				}

				// if the changes doesn't include the selected `<option>` we don't need to do anything
				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) {