Merge pull request #2251 from sveltejs/gh-2025-alt

make customElement a boolean option

src/compile/Component.ts

@@ -118,15 +118,14 @@ export default class Component {
 		this.componentOptions = process_component_options(this, this.ast.html.children);
 		this.namespace = namespaces[this.componentOptions.namespace] || this.componentOptions.namespace;
 
-		if (compileOptions.customElement === true && !this.componentOptions.tag) {
+		if (compileOptions.customElement) {
-			throw new Error(`No tag name specified`); // TODO better error
+			this.tag = this.componentOptions.tag || compileOptions.tag;
+			if (!this.tag) {
+				throw new Error(`Cannot compile to a custom element without specifying a tag name via options.tag or <svelte:options>`);
+			}
+		} else {
+			this.tag = this.name;
 		}
-
-		this.tag = compileOptions.customElement
-			? compileOptions.customElement === true
-				? this.componentOptions.tag
-				: compileOptions.customElement as string
-			: this.name;
 
 		this.walk_module_js();
 		this.walk_instance_js_pre_template();

src/compile/index.ts

@@ -21,6 +21,7 @@ const valid_options = [
 	'hydratable',
 	'legacy',
 	'customElement',
+	'tag',
 	'css',
 	'preserveComments'
 ];

src/interfaces.ts

@@ -53,7 +53,8 @@ export interface CompileOptions {
 	immutable?: boolean;
 	hydratable?: boolean;
 	legacy?: boolean;
-	customElement?: CustomElementOptions | true;
+	customElement?: boolean;
+	tag?: string;
 	css?: boolean;
 
 	preserveComments?: boolean | false;
@@ -64,11 +65,6 @@ export interface Visitor {
 	leave?: (node: Node) => void;
 }
 
-export interface CustomElementOptions {
-	tag?: string;
-	props?: string[];
-}
-
 export interface AppendTarget {
 	slots: Record<string, string>;
 	slotStack: string[]

src/parse/index.ts

@@ -3,13 +3,13 @@ import fragment from './state/fragment';
 import { whitespace } from '../utils/patterns';
 import reservedNames from '../utils/reservedNames';
 import fullCharCodeAt from '../utils/fullCharCodeAt';
-import { Node, Ast, CustomElementOptions } from '../interfaces';
+import { Node, Ast } from '../interfaces';
 import error from '../utils/error';
 
 interface ParserOptions {
 	filename?: string;
 	bind?: boolean;
-	customElement?: CustomElementOptions | true;
+	customElement?: boolean;
 }
 
 type ParserState = (parser: Parser) => (ParserState | void);
@@ -17,7 +17,7 @@ type ParserState = (parser: Parser) => (ParserState | void);
 export class Parser {
 	readonly template: string;
 	readonly filename?: string;
-	readonly customElement: CustomElementOptions | true;
+	readonly customElement: boolean;
 
 	index = 0;
 	stack: Array<Node> = [];