@vaadin/component-base 24.6.0-rc1 → 24.7.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.6.0-rc1",
+  "version": "24.7.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,9 +38,9 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-rc1",
+    "@vaadin/chai-plugins": "24.7.0-alpha1",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "d62ba309e3286777ad3ea7e015d50a2c4976bb42"
+  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
 }

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '24.6.0-rc1') {
+export function defineCustomElement(CustomElement, version = '24.7.0-alpha1') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;

package/src/polylit-mixin.js

@@ -195,6 +195,27 @@ const PolylitMixinImplementation = (superclass) => {
       return result;
     }
 
+    constructor() {
+      super();
+      this.__hasPolylitMixin = true;
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      // Components like `vaadin-overlay` are teleported to the body element when opened.
+      // If their opened state is set as an attribute, the teleportation happens immediately
+      // after they are connected to the DOM. This means they will be outside the scope of
+      // querySelectorAll in the parent component's `firstUpdated()`. To ensure their reference
+      // is still registered in the $ map, we propagate the reference here.
+      const parentHost = this.getRootNode().host;
+      if (parentHost && parentHost.__hasPolylitMixin && this.id) {
+        parentHost.$ ||= {};
+        parentHost.$[this.id] = this;
+      }
+    }
+
     /** @protected */
     firstUpdated() {
       super.firstUpdated();
@@ -203,8 +224,10 @@ const PolylitMixinImplementation = (superclass) => {
         this.$ = {};
       }
 
-      this.renderRoot.querySelectorAll('[id]').forEach((node) => {
-        this.$[node.id] = node;
+      [...Object.values(this.$), this.renderRoot].forEach((node) => {
+        node.querySelectorAll('[id]').forEach((node) => {
+          this.$[node.id] = node;
+        });
       });
     }
 
@@ -220,14 +243,14 @@ const PolylitMixinImplementation = (superclass) => {
         this.__runObservers(props, this.constructor.__observers);
       }
 
-      if (this.__dynamicPropertyObservers) {
-        this.__runDynamicObservers(props, this.__dynamicPropertyObservers);
-      }
-
       if (this.constructor.__complexObservers) {
         this.__runComplexObservers(props, this.constructor.__complexObservers);
       }
 
+      if (this.__dynamicPropertyObservers) {
+        this.__runDynamicObservers(props, this.__dynamicPropertyObservers);
+      }
+
       if (this.__dynamicMethodObservers) {
         this.__runComplexObservers(props, this.__dynamicMethodObservers);
       }