perf: isolate custom element client runtime

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

packages/svelte/package.json

@@ -56,6 +56,9 @@
     "./internal/client": {
       "default": "./src/internal/client/index.js"
     },
+    "./internal/client/custom-element": {
+      "default": "./src/internal/client/dom/elements/custom-element.js"
+    },
     "./internal/disclose-version": {
       "default": "./src/internal/disclose-version.js"
     },

packages/svelte/scripts/check-treeshakeability.js

@@ -147,6 +147,7 @@ function check_bundle(case_name, ...strings) {
 
 check_bundle('Hydration code', 'hydrate_node', 'hydrate_next');
 check_bundle('Legacy code', 'component_context.l');
+check_bundle('Custom element code', 'observedAttributes');
 check_bundle('$inspect.trace', `'CreatedAt'`);
 
 if (failed) {

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -140,7 +140,18 @@ export function client_component(analysis, options) {
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
 		is_instance: false,
-		hoisted: [b.import_all('$', 'svelte/internal/client'), ...analysis.instance_body.hoisted],
+		hoisted: [
+			b.import_all('$', 'svelte/internal/client'),
+			...(analysis.custom_element
+				? [
+						b.imports(
+							[['create_custom_element', '$$_create_custom_element']],
+							'svelte/internal/client/custom-element'
+						)
+					]
+				: []),
+			...analysis.instance_body.hoisted
+		],
 		templates: new Map(),
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
@@ -641,7 +652,7 @@ export function client_component(analysis, options) {
 		}
 
 		const create_ce = b.call(
-			'$.create_custom_element',
+			'$$_create_custom_element',
 			b.id(analysis.name),
 			b.object(props_str),
 			slots_str,

packages/svelte/src/internal/client/dom/elements/custom-element.js

@@ -14,7 +14,9 @@ import { create_element } from '../operations.js';
 /** @type {any} */
 let SvelteElement;
 
-if (typeof HTMLElement === 'function') {
+function get_svelte_element() {
+	if (SvelteElement !== undefined || typeof HTMLElement !== 'function') return SvelteElement;
+
 	SvelteElement = class extends HTMLElement {
 		/** The Svelte component constructor */
 		$$ctor;
@@ -223,6 +225,8 @@ if (typeof HTMLElement === 'function') {
 			);
 		}
 	};
+
+	return SvelteElement;
 }
 
 /**
@@ -294,7 +298,7 @@ export function create_custom_element(
 	shadow_root_init,
 	extend
 ) {
-	let Class = class extends SvelteElement {
+	let Class = class extends get_svelte_element() {
 		constructor() {
 			super(Component, slots, shadow_root_init);
 			this.$$p_d = props_definition;