customElement

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -465,7 +465,8 @@ export function analyze_component(root, source, options) {
 		}
 	}
 
-	const is_custom_element = !!options.customElementOptions || options.customElement;
+	const is_custom_element =
+		!!options.customElementOptions || options.customElement({ filename: options.filename });
 
 	const name = module.scope.generate(options.name ?? component_name);
 
@@ -682,7 +683,10 @@ export function analyze_component(root, source, options) {
 				w.options_deprecated_accessors(attribute);
 			}
 
-			if (attribute.name === 'customElement' && !options.customElement) {
+			if (
+				attribute.name === 'customElement' &&
+				!options.customElement({ filename: options.filename })
+			) {
 				w.options_missing_custom_element(attribute);
 			}
 

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

@@ -595,7 +595,7 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	const ce = options.customElementOptions ?? options.customElement;
+	const ce = options.customElementOptions ?? options.customElement({ filename: options.filename });
 
 	if (ce) {
 		const ce_props = typeof ce === 'boolean' ? {} : ce.props || {};

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

@@ -303,7 +303,7 @@ export function server_component(analysis, options) {
 	if (
 		analysis.css.ast !== null &&
 		options.css({ filename: options.filename }) === 'injected' &&
-		!options.customElement
+		!options.customElement({ filename: options.filename })
 	) {
 		const hash = b.literal(analysis.css.hash);
 		const code = b.literal(render_stylesheet(analysis.source, analysis, options).code);

packages/svelte/src/compiler/types/index.d.ts

@@ -73,9 +73,11 @@ export interface CompileOptions extends ModuleCompileOptions {
 	/**
 	 * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
 	 *
+	 * You can also pass a function that receives `{ filename }` and returns a boolean.
+	 *
 	 * @default false
 	 */
-	customElement?: boolean;
+	customElement?: boolean | ((options: { filename: string }) => boolean);
 	/**
 	 * If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.
 	 *
@@ -250,6 +252,7 @@ export type ValidatedCompileOptions = ValidatedModuleCompileOptions &
 		Required<CompileOptions>,
 		| keyof ModuleCompileOptions
 		| 'name'
+		| 'customElement'
 		| 'compatibility'
 		| 'outputFilename'
 		| 'cssOutputFilename'
@@ -258,6 +261,7 @@ export type ValidatedCompileOptions = ValidatedModuleCompileOptions &
 		| 'runes'
 	> & {
 		name: CompileOptions['name'];
+		customElement: (options: { filename: string }) => boolean;
 		outputFilename: CompileOptions['outputFilename'];
 		cssOutputFilename: CompileOptions['cssOutputFilename'];
 		sourcemap: CompileOptions['sourcemap'];

packages/svelte/src/compiler/validate-options.js

@@ -77,7 +77,17 @@ const component_options = {
 	// TODO this is a sourcemap option, would be good to put under a sourcemap namespace
 	cssOutputFilename: string(undefined),
 
-	customElement: boolean(false),
+	/** @type {Validator<boolean | ((options: { filename: string }) => boolean), (options: { filename: string }) => boolean>} */
+	customElement: parametric(
+		/** @type {(options: { filename: string }) => boolean} */ (() => false),
+		(input, keypath) => {
+			if (typeof input !== 'boolean') {
+				throw_error(`${keypath} should be true or false`);
+			}
+
+			return /** @type {boolean} */ (input);
+		}
+	),
 
 	discloseVersion: boolean(true),