refactor: use event instead of mutation observer

Author: ugur-vaadin

packages/dashboard/src/vaadin-dashboard-item-mixin.js

@@ -288,6 +288,7 @@ export const DashboardItemMixin = (superClass) =>
       super();
       this.__keyboardController = new KeyboardController(this);
       this.__focusTrapController = new FocusTrapController(this);
+      this.__boundRootHeadingLevelChangedListener = this.__updateRootHeadingLevel.bind(this);
     }
 
     /** @protected */
@@ -401,19 +402,22 @@ export const DashboardItemMixin = (superClass) =>
       this.__removeHeadingLevelObserver();
       const parentLayout = getParentLayout(this);
       if (parentLayout) {
-        this.__headingLevelObserver = new MutationObserver(() => this.__updateRootHeadingLevel());
-        this.__headingLevelObserver.observe(parentLayout, {
-          attributes: true,
-          attributeFilter: ['root-heading-level'],
-        });
+        this.__rootHeadingLevelListenerTarget = parentLayout;
+        parentLayout.addEventListener(
+          'dashboard-root-heading-level-changed',
+          this.__boundRootHeadingLevelChangedListener,
+        );
       }
     }
 
     /** @private */
     __removeHeadingLevelObserver() {
-      if (this.__headingLevelObserver) {
-        this.__headingLevelObserver.disconnect();
-        this.__headingLevelObserver = null;
+      if (this.__rootHeadingLevelListenerTarget) {
+        this.__rootHeadingLevelListenerTarget.removeEventListener(
+          'dashboard-root-heading-level-changed',
+          this.__boundRootHeadingLevelChangedListener,
+        );
+        this.__rootHeadingLevelListenerTarget = null;
       }
     }
 

packages/dashboard/src/vaadin-dashboard-layout-mixin.js

@@ -45,6 +45,7 @@ export const DashboardLayoutMixin = (superClass) =>
           value: 2,
           sync: true,
           reflectToAttribute: true,
+          observer: '__rootHeadingLevelChanged',
         },
       };
     }
@@ -78,4 +79,11 @@ export const DashboardLayoutMixin = (superClass) =>
       // ...and set it as the new value
       this.$.grid.style.setProperty('--_col-count', columnCount);
     }
+
+    /** @private */
+    __rootHeadingLevelChanged(rootHeadingLevel) {
+      this.dispatchEvent(
+        new CustomEvent('dashboard-root-heading-level-changed', { detail: { value: rootHeadingLevel } }),
+      );
+    }
   };