Repository: gradio-app/gradio
File: js/html/shared/HTML.svelte (Svelte)

Code before:
		component_class_name = "HTML"
	} = $props();

	let [has_children, pre_html_template, post_html_template] = $derived.by(
		() => {
			if (html_template.includes("@children")) {
				const parts = html_template.split("@children");
				return [true, parts[0] || "", parts.slice(1).join("@children") || ""];
			}
			return [false, html_template, ""];
		}
	);

	let old_props = $state(JSON.parse(JSON.stringify(props)));

	const dispatch = createEventDispatcher<{
		event: { type: "click" | "submit"; data: any };
		update_value: { data: any; property: "value" | "label" | "visible" };
	}>();

	const trigger = (
		event_type: "click" | "submit",
		event_data: any = {}
	): void => {
		dispatch("event", { type: event_type, data: event_data });
	};

	let element: HTMLDivElement;
	let pre_element: HTMLDivElement;
	let post_element: HTMLDivElement;
	let scrollable_parent: HTMLElement | null = null;
	let random_id = `html-${Math.random().toString(36).substring(2, 11)}`;
	let style_element: HTMLStyleElement | null = null;
	let reactiveProps: Record<string, any> = {};
	let currentHtml = $state("");
	let currentPreHtml = $state("");
	let currentPostHtml = $state("");
	let currentCss = $state("");
	let renderScheduled = $state(false);
	let mounted = $state(false);
	let html_error_message: string | null = $state(null);
	let css_error_message: string | null = $state(null);

	function get_scrollable_parent(element: HTMLElement): HTMLElement | null {
		let parent = element.parentElement;
		while (parent) {
			const style = window.getComputedStyle(parent);
			if (
				style.overflow === "auto" ||
				style.overflow === "scroll" ||
				style.overflowY === "auto" ||

Review comment (suggestion):
We should check if a child is actually passed in as well, the `children` prop should tell us. 

Code after:
		apply_default_css = true,
		component_class_name = "HTML",
		children
	}: {
		elem_classes: string[];
		props: Record<string, any>;
		html_template: string;
		css_template: string;
		js_on_load: string | null;
		visible: boolean;
		autoscroll: boolean;
		apply_default_css: boolean;
		component_class_name: string;
		children?: Snippet;
	} = $props();

	let [has_children, pre_html_template, post_html_template] = $derived.by(
		() => {
			if (html_template.includes("@children") && children) {
				const parts = html_template.split("@children");
				return [true, parts[0] || "", parts.slice(1).join("@children") || ""];
			}
			return [false, html_template, ""];
		}
	);

	let old_props = $state(JSON.parse(JSON.stringify(props)));

	const dispatch = createEventDispatcher<{
		event: { type: "click" | "submit"; data: any };
		update_value: { data: any; property: "value" | "label" | "visible" };
	}>();

	const trigger = (
		event_type: "click" | "submit",
		event_data: any = {}
	): void => {
		dispatch("event", { type: event_type, data: event_data });
	};

	let element: HTMLDivElement;
	let pre_element: HTMLDivElement;
	let post_element: HTMLDivElement;
	let scrollable_parent: HTMLElement | null = null;
	let random_id = `html-${Math.random().toString(36).substring(2, 11)}`;
	let style_element: HTMLStyleElement | null = null;
	let reactiveProps: Record<string, any> = {};
	let currentHtml = $state("");
	let currentPreHtml = $state("");
	let currentPostHtml = $state("");
	let currentCss = $state("");