feat(framework): implement invalidateParent (#1964)

docs/dev/Metadata.md

@@ -113,7 +113,7 @@ Setting | Type | Default | Description
 `individualSlots` | `Boolean` | false | If set to `true`, each child will have its own slot, allowing you to arrange/wrap the children arbitrarily.
 `propertyName` | `String` | N/A | Allows to set the name of the property on the Web Component, where the children belonging to this slot will be stored.
 `listenFor` | `Object` | N/A | **Experimental, do not use.** If set, whenever the children, belonging to this slot have their properties changed, the Web Component will be invalidated. 
-
+`invalidateParent` | `Boolean` | false | **Experimental, do not use.** Defines whether every invalidation of a UI5 Web Component in this slot should trigger an invalidation of the parent UI5 Web Component.
 The `type` setting is required.
 
 Notes:

packages/base/src/UI5Element.js

@@ -58,6 +58,7 @@ class UI5Element extends HTMLElement {
 
 		this._monitoredChildProps = new Map();
 		this._firePropertyChange = false;
+		this._shouldInvalidateParent = false;
 	}
 
 	/**
@@ -267,6 +268,10 @@ class UI5Element extends HTMLElement {
 				this._attachChildPropertyUpdated(child, slotData.listenFor);
 			}
 
+			if (child.isUI5Element && slotData.invalidateParent) {
+				child._shouldInvalidateParent = true;
+			}
+
 			if (isSlot(child)) {
 				this._attachSlotChange(child);
 			}
@@ -305,6 +310,7 @@ class UI5Element extends HTMLElement {
 		children.forEach(child => {
 			if (child && child.isUI5Element) {
 				this._detachChildPropertyUpdated(child);
+				child._shouldInvalidateParent = false;
 			}
 
 			if (isSlot(child)) {
@@ -496,6 +502,10 @@ class UI5Element extends HTMLElement {
 			this._upToDate = false;
 			// console.log("INVAL", this, ...arguments);
 			RenderScheduler.renderDeferred(this);
+
+			if (this._shouldInvalidateParent) {
+				this.parentNode._invalidate();
+			}
 		}
 	}