feat(base): implement late validation (#522)

Author: vladitasev

packages/base/src/UI5Element.js

@@ -217,7 +217,7 @@ class UI5Element extends HTMLElement {
 	}
 
 	static get observedAttributes() {
-		const observedProps = this.getMetadata().getObservedProps();
+		const observedProps = this.getMetadata().getPublicPropsList();
 		return observedProps.map(camelToKebabCase);
 	}
 
@@ -268,8 +268,8 @@ class UI5Element extends HTMLElement {
 	}
 
 	_upgradeAllProperties() {
-		const observedProps = this.constructor.getMetadata().getObservedProps();
-		observedProps.forEach(this._upgradeProperty.bind(this));
+		const allProps = this.constructor.getMetadata().getPropsList();
+		allProps.forEach(this._upgradeProperty.bind(this));
 	}
 
 	static define() {

packages/base/src/UI5ElementMetadata.js

@@ -17,11 +17,12 @@ class UI5ElementMetadata {
 		return this.metadata.defaultSlot || "content";
 	}
 
-	getObservedProps() {
-		const properties = this.getProperties();
-		const allProps = Object.keys(properties);
-		const observedProps = allProps.filter(UI5ElementMetadata.isPublicProperty);
-		return observedProps;
+	getPropsList() {
+		return Object.keys(this.getProperties());
+	}
+
+	getPublicPropsList() {
+		return this.getPropsList().filter(UI5ElementMetadata.isPublicProperty);
 	}
 
 	getSlots() {
@@ -99,7 +100,16 @@ const validateSingleSlot = (value, slotData) => {
 	const slottedNodes = getSlottedNodes(value);
 	slottedNodes.forEach(el => {
 		if (!(el instanceof propertyType)) {
-			throw new Error(`${el} is not of type ${propertyType}`);
+			const isHTMLElement = el instanceof HTMLElement;
+			const tagName = isHTMLElement && el.tagName.toLowerCase();
+			const isCustomElement = isHTMLElement && tagName.includes("-");
+			if (isCustomElement) {
+				window.customElements.whenDefined(tagName).then(() => {
+					if (!(el instanceof propertyType)) {
+						throw new Error(`${el} is not of type ${propertyType}`);
+					}
+				});
+			}
 		}
 	});
 

packages/main/src/List.js

@@ -9,9 +9,6 @@ import ListItemBase from "./ListItemBase.js";
 import ListMode from "./types/ListMode.js";
 import ListSeparators from "./types/ListSeparators.js";
 import ListItemType from "./types/ListItemType.js";
-import StandardListItem from "./StandardListItem.js";
-import CustomListItem from "./CustomListItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
 // Template
 import ListRenderer from "./build/compiled/ListRenderer.lit.js";
 
@@ -589,16 +586,6 @@ class List extends UI5Element {
 			},
 		};
 	}
-
-	static async define(...params) {
-		await Promise.all([
-			StandardListItem.define(),
-			CustomListItem.define(),
-			GroupHeaderListItem.define(),
-		]);
-
-		super.define(...params);
-	}
 }
 
 Bootstrap.boot().then(_ => {