selectedcontent() — svelte Function Reference

Architecture documentation for the selectedcontent() function in customizable-select.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 2

Entity Profile

ClientRuntime→ Hydration→ selectedcontent() — svelte Function Reference

Dependency Diagram

graph TD
  045d66dd_55a4_3b79_abab_2dd2ce6329b1["selectedcontent()"]
  4871424a_ea24_562e_42c1_423f3652e63b["customizable-select.js"]
  045d66dd_55a4_3b79_abab_2dd2ce6329b1 -->|defined in| 4871424a_ea24_562e_42c1_423f3652e63b
  c5c0dafa_0d9f_81e0_43ed_031570d81357["is_supported()"]
  045d66dd_55a4_3b79_abab_2dd2ce6329b1 -->|calls| c5c0dafa_0d9f_81e0_43ed_031570d81357
  4133c9ed_6ce6_0847_e62e_62aaf8690ab4["attach()"]
  045d66dd_55a4_3b79_abab_2dd2ce6329b1 -->|calls| 4133c9ed_6ce6_0847_e62e_62aaf8690ab4
  style 045d66dd_55a4_3b79_abab_2dd2ce6329b1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/customizable-select.js lines 29–68

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