add custom element version as static property for later custom registration support

src/compiler/compile/render_dom/index.ts

@@ -542,7 +542,7 @@ export default function dom(
 	push_array(declaration.body.body, accessors);
 	body.push(declaration);
 
-	if (options.customElement && component.tag != null) {
+	if (options.customElement) {
 		const props_str = writable_props.reduce((def, prop) => {
 			def[prop.export_name] = component.component_options.ceProps?.[prop.export_name] || {};
 			if (prop.is_boolean && !def[prop.export_name].type) {
@@ -557,9 +557,13 @@ export default function dom(
 			.join(',');
 		const use_shadow_dom = component.component_options.shadowdom !== 'none' ? 'true' : 'false';
 
-		body.push(
+		if (component.tag != null) {
-			b`@_customElements.define("${component.tag}", @create_custom_element(${name}, ${JSON.stringify(props_str)}, [${slots_str}], [${accessors_str}], ${use_shadow_dom}));`
+			body.push(
-		);
+				b`@_customElements.define("${component.tag}", @create_custom_element(${name}, ${JSON.stringify(props_str)}, [${slots_str}], [${accessors_str}], ${use_shadow_dom}));`
+			);
+		} else {
+			body.push(b`@create_custom_element(${name}, ${JSON.stringify(props_str)}, [${slots_str}], [${accessors_str}], ${use_shadow_dom});`);
+		}
 	}
 
 	return { js: flatten(body), css };

src/runtime/internal/Component.ts

@@ -392,6 +392,8 @@ export function create_custom_element(
 		});
 	});
 
+	Component.element = Class as any;
+
 	return Class;
 }
 

src/runtime/internal/dev.ts

@@ -201,6 +201,9 @@ export class SvelteComponentDev extends SvelteComponent {
 	 */
 	$$slot_def: any;
 
+	/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+	static element?: typeof HTMLElement;
+
 	constructor(options: ComponentConstructorOptions) {
 		if (!options || (!options.target && !options.$$inline)) {
 			throw new Error("'target' is a required option");
@@ -317,11 +320,14 @@ export class SvelteComponentTyped<
  * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
  * ```
  */
-export type ComponentType<Component extends SvelteComponentTyped = SvelteComponentTyped> = new (
+export type ComponentType<Component extends SvelteComponentTyped = SvelteComponentTyped> = (new (
 	options: ComponentConstructorOptions<
 		Component extends SvelteComponentTyped<infer Props> ? Props : Record<string, any>
 	>
-) => Component;
+) => Component) & {
+	/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+	element?: typeof HTMLElement
+};
 
 /**
  * Convenience type to get the props the given component expects. Example:

test/custom-elements/samples/no-tag/test.js

@@ -1,10 +1,9 @@
 import * as assert from 'assert';
 import { tick } from 'svelte';
 import CustomElement from './main.svelte';
-import { create_custom_element } from 'svelte/internal';
 
 export default async function (target) {
-	customElements.define('no-tag', create_custom_element(CustomElement, { name: {} }, [], [], true));
+	customElements.define('no-tag', CustomElement.element);
 	target.innerHTML = '<no-tag name="world"></no-tag>';
 	await tick();