Function connectedCallback

packages/base/src/UI5Element.ts:325–384

* Do not call this method from derivatives of UI5Element, use "onEnterDOM" only * @private

()

	 * @private
	 */
	async connectedCallback() {
		if (DEV_MODE) {
			const props = (this.constructor as typeof UI5Element).getMetadata().getProperties();
			for (const [prop, propData] of Object.entries(props)) { // eslint-disable-line
				if (Object.hasOwn(this, prop) && !this.initializedProperties.has(prop)) {
					// initialized properties should not trigger this error as they will be reassigned, only property initializers will trigger this in case unsupported TS mode
					// eslint-disable-next-line no-console
					console.error(`[UI5-FWK] ${(this.constructor as typeof UI5Element).getMetadata().getTag()} has a property [${prop}] that is shadowed by the instance. Updates to this property will not invalidate the component. Possible reason is TS target ES2022 or TS useDefineForClassFields`);
				}
			}
		}

		const ctor = this.constructor as typeof UI5Element;

		registerElement(this);

		this.setAttribute(ctor.getMetadata().getPureTag(), "");
		if (ctor.getMetadata().supportsF6FastNavigation() && !this.hasAttribute("data-sap-ui-fastnavgroup")) {
			this.setAttribute("data-sap-ui-fastnavgroup", "true");
		}

		const slotsAreManaged = ctor.getMetadata().slotsAreManaged();

		this._inDOM = true;

		if (slotsAreManaged) {
			// always register the observer before yielding control to the main thread (await)
			this._startObservingDOMChildren();
			await this._processChildren();
		}

		if (!ctor.asyncFinished) {
			await ctor._definePromise;
		}

		// Skip rendering while a language change is in progress to avoid rendering with not fully loaded locale data.
		// Once the locale data is loaded, the language-aware component will be re-rendered.
		if (ctor.getMetadata().isLanguageAware() && getLanguageChangePending()) {
			return;
		}

		if (!this._inDOM) { // Component removed from DOM while _processChildren was running
			return;
		}

		renderImmediately(this);
		this._domRefReadyPromise._deferredResolve!();
		this._fullyConnected = true;
		this.onEnterDOM();

		if (this.hasAttribute("autofocus")) {
			// Honor the global `autofocus` HTML attribute. Done manually because
			// Firefox/Safari close the autofocus window at end-of-parse, before
			// async UI5 components have rendered their shadow DOM. Per HTML spec,
			// only the first element with `autofocus` in document order wins.
			requestAnimationFrame(() => {
				this.focus();
			});