fix(framework): component children that are slots now invalidate parent upon slotchange (#1649)

Author: vladitasev

packages/base/src/UI5Element.js

@@ -12,6 +12,7 @@ import getEffectiveStyle from "./theming/getEffectiveStyle.js";
 import Integer from "./types/Integer.js";
 import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
 import isValidPropertyName from "./util/isValidPropertyName.js";
+import isSlot from "./util/isSlot.js";
 
 const metadata = {
 	events: {
@@ -237,6 +238,10 @@ class UI5Element extends HTMLElement {
 				this._attachChildPropertyUpdated(child, slotData.listenFor);
 			}
 
+			if (isSlot(child)) {
+				this._attachSlotChange(child);
+			}
+
 			const propertyName = slotData.propertyName || slotName;
 
 			if (slottedChildrenMap.has(propertyName)) {
@@ -272,6 +277,10 @@ class UI5Element extends HTMLElement {
 			if (child && child.isUI5Element) {
 				this._detachChildPropertyUpdated(child);
 			}
+
+			if (isSlot(child)) {
+				this._detachSlotChange(child);
+			}
 		});
 
 		this._state[propertyName] = [];
@@ -422,6 +431,25 @@ class UI5Element extends HTMLElement {
 		}
 	}
 
+	/**
+	 * @private
+	 */
+	_attachSlotChange(child) {
+		if (!this._invalidateOnSlotChange) {
+			this._invalidateOnSlotChange = () => {
+				this._invalidate("slotchange");
+			};
+		}
+		child.addEventListener("slotchange", this._invalidateOnSlotChange);
+	}
+
+	/**
+	 * @private
+	 */
+	_detachSlotChange(child) {
+		child.removeEventListener("slotchange", this._invalidateOnSlotChange);
+	}
+
 	/**
 	 * Asynchronously re-renders an already rendered web component
 	 * @private
@@ -605,7 +633,7 @@ class UI5Element extends HTMLElement {
 	 */
 	getSlottedNodes(slotName) {
 		const reducer = (acc, curr) => {
-			if (curr.localName !== "slot") {
+			if (!isSlot(curr)) {
 				return acc.concat([curr]);
 			}
 			return acc.concat(curr.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement));

packages/base/src/UI5ElementMetadata.js

@@ -1,6 +1,7 @@
 import DataType from "./types/DataType.js";
 import isDescendantOf from "./util/isDescendantOf.js";
 import { camelToKebabCase } from "./util/StringHelper.js";
+import isSlot from "./util/isSlot.js";
 
 /**
  *
@@ -150,10 +151,7 @@ const validateSingleSlot = (value, slotData) => {
 	}
 
 	const getSlottedNodes = el => {
-		const isTag = el instanceof HTMLElement;
-		const isSlot = isTag && el.localName === "slot";
-
-		if (isSlot) {
+		if (isSlot(el)) {
 			return el.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
 		}
 

packages/base/src/util/isSlot.js

@@ -0,0 +1,3 @@
+const isSlot = el => el && el instanceof HTMLElement && el.localName === "slot";
+
+export default isSlot;

packages/main/src/Input.js

@@ -863,19 +863,7 @@ class Input extends UI5Element {
 	}
 
 	get valueStateMessageText() {
-		const valueStateMessage = [];
-
-		this.valueStateMessage.forEach(el => {
-			if (el.localName === "slot") {
-				el.assignedNodes({ flatten: true }).forEach(assignedNode => {
-					valueStateMessage.push(assignedNode.cloneNode(true));
-				});
-			} else {
-				valueStateMessage.push(el.cloneNode(true));
-			}
-		});
-
-		return valueStateMessage;
+		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 	}
 
 	get shouldDisplayOnlyValueStateMessage() {