diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
index 36f31b62b81c..41f125ad78c1 100644
--- a/packages/base/src/UI5Element.ts
+++ b/packages/base/src/UI5Element.ts
@@ -1354,22 +1354,22 @@ abstract class UI5Element extends HTMLElement {
this.i18nBundleStorage[bundleName] = i18nBundles[index];
});
this.asyncFinished = true;
+
+ // Register the custom element only after CLDR and i18n data is loaded
+ const tag = this.getMetadata().getTag();
+ const definedLocally = isTagRegistered(tag);
+ const definedGlobally = customElements.get(tag);
+
+ if (definedGlobally && !definedLocally) {
+ recordTagRegistrationFailure(tag);
+ } else if (!definedGlobally) {
+ this._generateAccessors();
+ registerTag(tag);
+ customElements.define(tag, this as unknown as CustomElementConstructor);
+ }
};
this.definePromise = defineSequence();
- const tag = this.getMetadata().getTag();
-
- const definedLocally = isTagRegistered(tag);
- const definedGlobally = customElements.get(tag);
-
- if (definedGlobally && !definedLocally) {
- recordTagRegistrationFailure(tag);
- } else if (!definedGlobally) {
- this._generateAccessors();
- registerTag(tag);
- customElements.define(tag, this as unknown as CustomElementConstructor);
- }
-
return this;
}
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
index 17d3689a3969..e2588126ca69 100644
--- a/packages/main/test/pages/DatePicker.html
+++ b/packages/main/test/pages/DatePicker.html
@@ -76,7 +76,7 @@ format-pattern - 'short'
format-pattern - 'long'
-
+
format-pattern - 'QQQ yyyy, MMM dd'
@@ -179,7 +179,7 @@ DatePicker with format `yyyy` should open picker on years
Form validation