chore: call customElements.define synchronously (#9857)

Author: pskelin

packages/base/src/Boot.ts

@@ -70,7 +70,7 @@ const boot = async (): Promise<void> => {
 		resolve();
 
 		booted = true;
-		await eventProvider.fireEventAsync("boot");
+		eventProvider.fireEvent("boot");
 	};
 
 	bootPromise = new Promise(bootExecutor as (resolve: PromiseResolve) => void);

packages/base/src/UI5Element.ts

@@ -300,6 +300,10 @@ abstract class UI5Element extends HTMLElement {
 			return;
 		}
 
+		if (!ctor.asyncFinished) {
+			await ctor.definePromise;
+		}
+
 		renderImmediately(this);
 		this._domRefReadyPromise._deferredResolve!();
 		this._fullyConnected = true;
@@ -1199,13 +1203,6 @@ abstract class UI5Element extends HTMLElement {
 		return uniqueDependenciesCache.get(this) || [];
 	}
 
-	/**
-	 * Returns a promise that resolves whenever all dependencies for this UI5 Web Component have resolved
-	 */
-	static whenDependenciesDefined(): Promise<Array<typeof UI5Element>> {
-		return Promise.all(this.getUniqueDependencies().map(dep => dep.define()));
-	}
-
 	/**
 	 * Hook that will be called upon custom element definition
 	 *
@@ -1215,15 +1212,16 @@ abstract class UI5Element extends HTMLElement {
 		return Promise.resolve();
 	}
 
+	static asyncFinished: boolean;
+	static definePromise: Promise<[void, void]> | undefined;
+
 	/**
 	 * Registers a UI5 Web Component in the browser window object
 	 * @public
 	 */
 	static async define(): Promise<typeof UI5Element> {
-		await boot();
-
-		await Promise.all([
-			this.whenDependenciesDefined(),
+		this.definePromise = Promise.all([
+			boot(),
 			this.onDefine(),
 		]);
 
@@ -1249,6 +1247,10 @@ abstract class UI5Element extends HTMLElement {
 			registerTag(tag);
 			customElements.define(tag, this as unknown as CustomElementConstructor);
 		}
+
+		await this.definePromise;
+		this.asyncFinished = true;
+
 		return this;
 	}
 

packages/compat/src/TableGroupRow.ts

@@ -79,7 +79,7 @@ class TableGroupRow extends UI5Element implements ITableRow {
 	}
 
 	get ariaLabelText() {
-		return `${TableGroupRow.i18nBundle.getText(TABLE_GROUP_ROW_ARIA_LABEL)} ${this.innerText}. ${this.forcedAriaPosition}`;
+		return `${TableGroupRow.i18nBundle.getText(TABLE_GROUP_ROW_ARIA_LABEL)} ${this.textContent}. ${this.forcedAriaPosition}`;
 	}
 
 	visibleColCount(): number {

packages/main/src/Calendar.ts

@@ -322,7 +322,10 @@ class Calendar extends CalendarPart {
 	}
 
 	static async onDefine() {
-		Calendar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+		[Calendar.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			super.onDefine(),
+		]);
 	}
 
 	/**