chore: skip first render

packages/base/src/UI5Element.ts

@@ -182,6 +182,7 @@ abstract class UI5Element extends HTMLElement {
 	_internals: ElementInternals;
 	_individualSlot?: string;
 	_getRealDomRef?: () => HTMLElement;
+	_skipFirstRender?: boolean;
 
 	static template?: TemplateFunction;
 	static _metadata: UI5ElementMetadata;
@@ -234,7 +235,9 @@ abstract class UI5Element extends HTMLElement {
 		const ctor = this.constructor as typeof UI5Element;
 		if (ctor._needsShadowDOM()) {
 			const defaultOptions = { mode: "open" } as ShadowRootInit;
-			if (!this.shadowRoot) { // if there is already a declarative shadow root, do not destroy it
+			if (this.shadowRoot) { // if there is already a declarative shadow root, do not destroy it
+				this._skipFirstRender = true;
+			} else {
 				this.attachShadow({ ...defaultOptions, ...ctor.getMetadata().getShadowRootOptions() });
 			}
 
@@ -854,7 +857,8 @@ abstract class UI5Element extends HTMLElement {
 
 		// Update shadow root
 		if (ctor._needsShadowDOM()) {
-			updateShadowRoot(this);
+			updateShadowRoot(this, this._skipFirstRender);
+			this._skipFirstRender = false;
 		}
 		this._rendered = true;
 

packages/base/src/updateShadowRoot.ts

@@ -2,10 +2,10 @@ import getConstructableStyle from "./theming/getConstructableStyle.js";
 import type UI5Element from "./UI5Element.js";
 
 /**
- * Updates the shadow root of a UI5Element or its static area item
+ * Updates the shadow root of a UI5Element (both CSS and HTML)
  * @param element
  */
-const updateShadowRoot = (element: UI5Element) => {
+const updateShadowRoot = (element: UI5Element, skipDOMUpdate = false) => {
 	const ctor = element.constructor as typeof UI5Element;
 	const shadowRoot = element.shadowRoot;
 
@@ -15,7 +15,9 @@ const updateShadowRoot = (element: UI5Element) => {
 	}
 
 	shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor);
-	ctor.renderer(element, shadowRoot);
+	if (!skipDOMUpdate) {
+		ctor.renderer(element, shadowRoot);
+	}
 };
 
 export default updateShadowRoot;