Skip to content

Commit 4fb9140

Browse files
authored
fix(runtime): make sure watchers can fire immediately if the custom element is already defined (#6381)
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
1 parent 0456db1 commit 4fb9140

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

src/runtime/initialize-component.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,14 @@ export const initializeComponent = async (
110110
// wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
111111
// watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
112112
// Stencil has completed instantiating the component.
113-
customElements.whenDefined(cmpTag).then(() => (hostRef.$flags$ |= HOST_FLAGS.isWatchReady));
113+
// customElements.whenDefined always returns the answer asynchronously (and slower than a queueMicrotask).
114+
// Checking !!customElements.get(cmpTag) instead is synchronous.
115+
const setWatchIsReady = () => (hostRef.$flags$ |= HOST_FLAGS.isWatchReady);
116+
if (!!customElements.get(cmpTag)) {
117+
setWatchIsReady();
118+
} else {
119+
customElements.whenDefined(cmpTag).then(setWatchIsReady);
120+
}
114121
}
115122

116123
if (BUILD.style && Cstr && Cstr.style) {

0 commit comments

Comments
 (0)