Function _updateSlots

packages/base/src/UI5Element.ts:485–617

* @private

()

	 * @private
	 */
	async _updateSlots() {
		const ctor = this.constructor as typeof UI5Element;
		const slotsMap = ctor.getMetadata().getSlots();
		const canSlotText = ctor.getMetadata().canSlotText();
		const domChildren = Array.from(canSlotText ? this.childNodes : this.children) as Array<Node>;

		const slotsCachedContentMap = new Map<string, Array<SlotValue>>(); // Store here the content of each slot before the mutation occurred
		const propertyNameToSlotMap = new Map<string, string>(); // Used for reverse lookup to determine to which slot the property name corresponds

		// Init the _state object based on the supported slots and store the previous values
		for (const [slotName, slotData] of Object.entries(slotsMap)) { // eslint-disable-line
			const propertyName = slotData.propertyName || slotName;
			propertyNameToSlotMap.set(propertyName, slotName);
			slotsCachedContentMap.set(propertyName, [...(this._state[propertyName] as Array<SlotValue>)]);
			this._clearSlot(slotName, slotData);
		}

		const autoIncrementMap = new Map<string, number>();
		const slottedChildrenMap = new Map<string, Array<{ child: Node, idx: number }>>();

		domChildren.forEach((child, idx) => {
			// Determine the type of the child (mainly by the slot attribute)
			const slotName = getSlotName(child);
			const slotData = slotsMap[slotName];

			// Check if the slotName is supported
			if (slotData === undefined) {
				if (slotName !== "default") {
					const validValues = Object.keys(slotsMap).join(", ");
					console.warn(`Unknown slotName: ${slotName}, ignoring`, child, `Valid values are: ${validValues}`); // eslint-disable-line
				}

				return;
			}

			const propertyName = slotData.propertyName || slotName;

			if (slottedChildrenMap.has(propertyName)) {
				slottedChildrenMap.get(propertyName)!.push({ child, idx });
			} else {
				slottedChildrenMap.set(propertyName, [{ child, idx }]);
			}
		});

		// Distribute the child in the _state object, keeping the Light DOM order,
		// not the order elements are defined.
		slottedChildrenMap.forEach((children, propertyName) => {
			this._state[propertyName] = children.sort((a, b) => a.idx - b.idx).map(_ => _.child);
			this._state[kebabToCamelCase(propertyName)] = this._state[propertyName];
		});

		const allChildrenUpgraded = domChildren.map(async child => {
			// Determine the type of the child (mainly by the slot attribute)
			const slotName = getSlotName(child);
			const slotData = slotsMap[slotName];

			// Check if the slotName is supported
			if (slotData === undefined) {