From 35828df9944c1e3b514269f659cb90faf448391a Mon Sep 17 00:00:00 2001
From: "jan.kucera" <jan.kucera@firma.seznam.cz>
Date: Fri, 15 Nov 2024 12:25:39 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20attributeChangedCallback?=
 =?UTF-8?q?=20waits=20for=20widget=20instance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../integration-custom-element/src/index.js   | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/integration-custom-element/src/index.js b/packages/integration-custom-element/src/index.js
index 3fa25373..1e554575 100644
--- a/packages/integration-custom-element/src/index.js
+++ b/packages/integration-custom-element/src/index.js
@@ -57,7 +57,7 @@ function registerCustomElement(options) {
         super._init();
         const customWidgetDefinition = deepMerge({}, widgetDefinition);
 
-        (async () => {
+        this._widgetPromise = (async () => {
           this._shadow = this.attachShadow({ mode: 'open' });
 
           try {
@@ -167,27 +167,29 @@ function registerCustomElement(options) {
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
-      this._widget?.attributeChangedCallback?.(
-        this._widget,
-        name,
-        oldValue,
-        newValue,
-        {
-          shadow: this._shadow,
-          customElement: this,
-        },
-      );
-
-      callbacks?.attributeChangedCallback?.(
-        this._widget,
-        name,
-        oldValue,
-        newValue,
-        {
-          shadow: this._shadow,
-          customElement: this,
-        },
-      );
+      this._widgetPromise.then(() => {
+        this._widget?.attributeChangedCallback?.(
+          this._widget,
+          name,
+          oldValue,
+          newValue,
+          {
+            shadow: this._shadow,
+            customElement: this,
+          },
+        );
+
+        callbacks?.attributeChangedCallback?.(
+          this._widget,
+          name,
+          oldValue,
+          newValue,
+          {
+            shadow: this._shadow,
+            customElement: this,
+          },
+        );
+      });
     }
   }