fix(runtime): make sure watchers can fire immediately if the custom element is already defined (#6381)

kristilw · web-flow · commit 4fb914024b7a · 2025-09-12T18:29:04.000Z
customElements.whenDefined always returns the answer asynchronously. Making the check synchronous when possible resolves the issue

fixes: 6373

BREAKING CHANGE: Watchers will fire earlier than before, but this is the expected behavior
diff --git a/src/runtime/initialize-component.ts b/src/runtime/initialize-component.ts
@@ -110,7 +110,14 @@ export const initializeComponent = async (
       // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
       // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
       // Stencil has completed instantiating the component.
-      customElements.whenDefined(cmpTag).then(() => (hostRef.$flags$ |= HOST_FLAGS.isWatchReady));
+      // customElements.whenDefined always returns the answer asynchronously (and slower than a queueMicrotask).
+      // Checking !!customElements.get(cmpTag) instead is synchronous.
+      const setWatchIsReady = () => (hostRef.$flags$ |= HOST_FLAGS.isWatchReady);
+      if (!!customElements.get(cmpTag)) {
+        setWatchIsReady();
+      } else {
+        customElements.whenDefined(cmpTag).then(setWatchIsReady);
+      }
     }
 
     if (BUILD.style && Cstr && Cstr.style) {
