@stencil/core 5.0.0-alpha.9 → 5.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +94 -0
  2. package/dist/app-data/index.d.ts +1 -1
  3. package/dist/app-data/index.js +4 -1
  4. package/dist/client-BRu0GtRn.mjs +2368 -0
  5. package/dist/compiler/index.d.mts +167 -3
  6. package/dist/compiler/index.mjs +3 -3
  7. package/dist/compiler/utils/index.d.mts +272 -2
  8. package/dist/compiler/utils/index.mjs +4 -3
  9. package/dist/{compiler-C0qmPoKu.mjs → compiler-NrvbUOX1.mjs} +2754 -1259
  10. package/dist/declarations/stencil-ext-modules.d.ts +5 -5
  11. package/dist/declarations/stencil-public-compiler.d.ts +208 -66
  12. package/dist/declarations/stencil-public-docs.d.ts +9 -0
  13. package/dist/declarations/stencil-public-runtime.d.ts +91 -6
  14. package/dist/fragment-Di1hWOC8.mjs +4 -0
  15. package/dist/{regular-expression-CFVJOTUh.mjs → helpers-Cpp3qc3u.mjs} +31 -15
  16. package/dist/index-BOrz3rbJ.d.mts +100 -0
  17. package/dist/{index-xAkMgLX_.d.ts → index-DnISpqrd.d.ts} +149 -9
  18. package/dist/{index-vY35H18z.d.mts → index-RrQfiPWK.d.mts} +490 -845
  19. package/dist/index.d.mts +4 -0
  20. package/dist/index.mjs +91 -2
  21. package/dist/jsx-runtime.mjs +2 -1
  22. package/dist/{node--akYC-sG.mjs → node-75gQKkFz.mjs} +60 -58
  23. package/dist/{chunk-z9aeyW2b.mjs → rolldown-runtime-BhDjJH2R.mjs} +1 -1
  24. package/dist/runtime/client/lazy.js +481 -184
  25. package/dist/runtime/client/runtime.d.ts +149 -10
  26. package/dist/runtime/client/runtime.js +481 -184
  27. package/dist/runtime/index.d.ts +6 -4
  28. package/dist/runtime/index.js +480 -182
  29. package/dist/runtime/server/index.d.mts +80 -8
  30. package/dist/runtime/server/index.mjs +403 -177
  31. package/dist/runtime/server/runner.d.mts +3 -0
  32. package/dist/runtime/server/runner.mjs +320 -337
  33. package/dist/signals/index.d.ts +2 -0
  34. package/dist/signals/index.js +4 -1
  35. package/dist/sys/node/index.d.mts +1 -2
  36. package/dist/sys/node/index.mjs +1 -1
  37. package/dist/sys/node/worker.d.mts +1 -1
  38. package/dist/sys/node/worker.mjs +6 -3
  39. package/dist/testing/index.d.mts +4716 -105
  40. package/dist/testing/index.mjs +7590 -794
  41. package/dist/util-IKfWWLJo.mjs +724 -0
  42. package/dist/validation-DAdGTrys.mjs +791 -0
  43. package/package.json +27 -27
  44. package/dist/client-aTQ7xHxx.mjs +0 -4678
  45. package/dist/index-BvkyxSY6.d.mts +0 -205
  46. package/dist/validation-ByxKj8bC.mjs +0 -1458
  47. /package/{LICENSE.md → LICENSE} +0 -0
@@ -144,8 +144,20 @@ const HOST_FLAGS = {
144
144
  isWatchReady: 128,
145
145
  isListenReady: 256,
146
146
  needsRerender: 512,
147
- devOnRender: 1024,
148
- devOnDidLoad: 2048
147
+ /**
148
+ * Set once this component's real (lazy-loaded) `connectedCallback` has fired for
149
+ * the first time. Lets a descendant skip creating/awaiting a connect-promise for
150
+ * an ancestor that's already connected. See {@link HostRef.$onFirstConnectResolve$}.
151
+ */
152
+ hasFiredConnected: 1024,
153
+ /**
154
+ * Set when a lazy component's dynamic `import()` fails to resolve a
155
+ * constructor. Distinct from `hasInitializedComponent` being unset, which
156
+ * is true while an initialization attempt is merely queued/in-flight.
157
+ */
158
+ hasFailedLoad: 2048,
159
+ devOnRender: 4096,
160
+ devOnDidLoad: 8192
149
161
  };
150
162
  const CF_scopedCssEncapsulation = 2;
151
163
  /**
@@ -230,7 +242,17 @@ const CMP_FLAGS = {
230
242
  * e.g. `encapsulation: { type: 'none', patches: ['all'] }`
231
243
  * Equivalent to the global `experimentalSlotFixes` config option.
232
244
  */
233
- patchAll: 32768
245
+ patchAll: 32768,
246
+ /**
247
+ * Determines if `clonable` is enabled for a component that uses the shadow DOM.
248
+ * e.g. `encapsulation: { type: 'shadow', clonable: true }` is set on the `@Component()` decorator
249
+ */
250
+ shadowClonable: 65536,
251
+ /**
252
+ * Determines if `serializable` is enabled for a component that uses the shadow DOM.
253
+ * e.g. `encapsulation: { type: 'shadow', serializable: true }` is set on the `@Component()` decorator
254
+ */
255
+ shadowSerializable: 1 << 17
234
256
  };
235
257
  /**
236
258
  * Namespaces
@@ -377,8 +399,13 @@ const registerHost = (hostElement, cmpMeta) => {
377
399
  if (BUILD.asyncLoading) {
378
400
  hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
379
401
  hostElement["s-rp"] = hostRef.$onReadyPromise$;
402
+ if (!BUILD.lazyLoad) {
403
+ hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
404
+ hostElement["s-fc"] = hostRef.$onFirstConnectPromise$;
405
+ }
380
406
  if (!hostElement["s-p"]) hostElement["s-p"] = [];
381
407
  if (!hostElement["s-rc"]) hostElement["s-rc"] = [];
408
+ if (!hostElement["s-pc"]) hostElement["s-pc"] = [];
382
409
  }
383
410
  if (BUILD.lazyLoad) hostRef.$fetchedCbList$ = [];
384
411
  const ref = hostRef;
@@ -398,7 +425,12 @@ const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
398
425
  const setErrorHandler = (handler) => customError = handler;
399
426
  //#endregion
400
427
  //#region src/client/client-load-module.ts
401
- const cmpModules = /* @__PURE__ */ new Map();
428
+ const cmpModules = /*@__PURE__*/ new Map();
429
+ /**
430
+ * Tracks how many times a dynamic `import()` for a given lazy bundle has failed.
431
+ * Used to cache bust the retry attempt in connected-callback.ts
432
+ */
433
+ const failedLoadAttempts = /*@__PURE__*/ new Map();
402
434
  /**
403
435
  * We need to separate out this prefix so that Esbuild doesn't try to resolve
404
436
  * the below, but instead retains a dynamic `import()` statement in the
@@ -429,13 +461,21 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
429
461
  } else if (!bundleId) return;
430
462
  const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
431
463
  if (module) return module[exportName];
464
+ const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
465
+ const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
432
466
  /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
433
- const entryFile = `${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`;
467
+ const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
434
468
  const onLoad = (importedModule) => {
435
- if (!BUILD.hotModuleReplacement) cmpModules.set(bundleId, importedModule);
469
+ if (!BUILD.hotModuleReplacement) {
470
+ failedLoadAttempts.delete(bundleId);
471
+ cmpModules.set(bundleId, importedModule);
472
+ }
436
473
  return importedModule[exportName];
437
474
  };
438
- const onError = (e) => consoleError(e, hostRef.$hostElement$);
475
+ const onError = (e) => {
476
+ failedLoadAttempts.set(bundleId, retryCount + 1);
477
+ consoleError(e, hostRef.$hostElement$);
478
+ };
439
479
  if (lazyLoadBasePath) return import(
440
480
  /* @vite-ignore */
441
481
  /* webpackInclude: /\.entry\.js$/ */
@@ -453,7 +493,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
453
493
  };
454
494
  //#endregion
455
495
  //#region src/client/client-style.ts
456
- const styles = /* @__PURE__ */ new Map();
496
+ const styles = /*@__PURE__*/ new Map();
457
497
  const modeResolutionChain = [];
458
498
  const setScopedSsr = (_opts) => {};
459
499
  const needsScopedSSR = () => false;
@@ -516,6 +556,10 @@ const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
516
556
  */
517
557
  const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
518
558
  const XLINK_NS = "http://www.w3.org/1999/xlink";
559
+ /**
560
+ * Minimum delay, in milliseconds, before retrying a failed lazy component load.
561
+ */
562
+ const LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
519
563
  const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
520
564
  "formAssociatedCallback",
521
565
  "formResetCallback",
@@ -538,7 +582,7 @@ const plt = {
538
582
  const setPlatformHelpers = (helpers) => {
539
583
  Object.assign(plt, helpers);
540
584
  };
541
- const supportsListenerOptions = /* @__PURE__ */ (() => {
585
+ const supportsListenerOptions = /*@__PURE__*/ (() => {
542
586
  let supported = false;
543
587
  try {
544
588
  win.document?.addEventListener("e", null, Object.defineProperty({}, "passive", { get() {
@@ -548,14 +592,14 @@ const supportsListenerOptions = /* @__PURE__ */ (() => {
548
592
  return supported;
549
593
  })();
550
594
  const promiseResolve = (v) => Promise.resolve(v);
551
- const supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */ (() => {
595
+ const supportsConstructableStylesheets = BUILD.constructableCSS ? /*@__PURE__*/ (() => {
552
596
  try {
553
597
  if (!win.document.adoptedStyleSheets) return false;
554
598
  return typeof new CSSStyleSheet().replaceSync === "function";
555
599
  } catch {}
556
600
  return false;
557
601
  })() : false;
558
- const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /* @__PURE__ */ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
602
+ const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /*@__PURE__*/ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
559
603
  //#endregion
560
604
  //#region src/client/client-task-queue.ts
561
605
  let queueCongestion = 0;
@@ -563,12 +607,13 @@ let queuePending = false;
563
607
  const queueDomReads = [];
564
608
  const queueDomWrites = [];
565
609
  const queueDomWritesLow = [];
610
+ const scheduleFlush = () => win.document?.hidden ? nextTick(flush) : plt.raf(flush);
566
611
  const queueTask = (queue, write) => (cb) => {
567
612
  queue.push(cb);
568
613
  if (!queuePending) {
569
614
  queuePending = true;
570
615
  if (write && plt.$flags$ & PLATFORM_FLAGS.queueSync) nextTick(flush);
571
- else plt.raf(flush);
616
+ else scheduleFlush();
572
617
  }
573
618
  };
574
619
  const consume = (queue) => {
@@ -601,16 +646,16 @@ const flush = () => {
601
646
  queueDomWritesLow.push(...queueDomWrites);
602
647
  queueDomWrites.length = 0;
603
648
  }
604
- if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) plt.raf(flush);
649
+ if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) scheduleFlush();
605
650
  else queueCongestion = 0;
606
651
  } else {
607
652
  consume(queueDomWrites);
608
- if (queuePending = queueDomReads.length > 0) plt.raf(flush);
653
+ if (queuePending = queueDomReads.length > 0) scheduleFlush();
609
654
  }
610
655
  };
611
656
  const nextTick = (cb) => promiseResolve().then(cb);
612
- const readTask = /* @__PURE__ */ queueTask(queueDomReads, false);
613
- const writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
657
+ const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
658
+ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
614
659
  //#endregion
615
660
  //#region src/runtime/asset-path.ts
616
661
  const getAssetPath = (path) => {
@@ -647,12 +692,15 @@ function createShadowRoot(cmpMeta) {
647
692
  if (BUILD.shadowSlotAssignmentManual) {
648
693
  if (!!(cmpMeta.$flags$ & CMP_FLAGS.shadowSlotAssignmentManual)) opts.slotAssignment = "manual";
649
694
  }
695
+ if (BUILD.shadowClonable) opts.clonable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowClonable);
696
+ if (BUILD.shadowSerializable) opts.serializable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowSerializable);
650
697
  const shadowRoot = this.attachShadow(opts);
651
698
  if (BUILD.shadowModeClosed && isClosed) this.__shadowRoot = shadowRoot;
652
699
  if (globalStyleSheet === void 0) globalStyleSheet = createStyleSheetIfNeededAndSupported(globalStyles) ?? null;
653
- if (globalStyleSheet) if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
654
- else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
655
- else if (globalStyles && !supportsConstructableStylesheets) {
700
+ if (globalStyleSheet) {
701
+ if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
702
+ else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
703
+ } else if (globalStyles && !supportsConstructableStylesheets) {
656
704
  const styleElm = document.createElement("style");
657
705
  styleElm.innerHTML = globalStyles;
658
706
  if (BUILD.hotModuleReplacement) styleElm.setAttribute(HYDRATED_STYLE_ID, GLOBAL_STYLE_ID);
@@ -677,8 +725,10 @@ function createShadowRoot(cmpMeta) {
677
725
  const updateFallbackSlotVisibility = (elm) => {
678
726
  const childNodes = internalCall(elm, "childNodes");
679
727
  if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
680
- if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
681
- else slotNode.hidden = false;
728
+ if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") {
729
+ if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
730
+ else slotNode.hidden = false;
731
+ }
682
732
  });
683
733
  let i = 0;
684
734
  for (i = 0; i < childNodes.length; i++) {
@@ -721,7 +771,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
721
771
  slottedNodes.push(childNode);
722
772
  if (typeof slotName !== "undefined") return slottedNodes;
723
773
  }
724
- slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
774
+ slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
725
775
  }
726
776
  return slottedNodes;
727
777
  }
@@ -752,7 +802,7 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
752
802
  if (nodeToRelocate.getAttribute("slot") === slotName) return true;
753
803
  return false;
754
804
  }
755
- if (nodeToRelocate["s-sn"] === slotName) return true;
805
+ if (typeof nodeToRelocate["s-sa"] === "string") return nodeToRelocate["s-sa"] === slotName;
756
806
  return slotName === "";
757
807
  };
758
808
  /**
@@ -801,8 +851,10 @@ function patchSlotNode(node) {
801
851
  const assignedFactory = (elementsOnly) => function(opts) {
802
852
  const toReturn = [];
803
853
  const slotName = this["s-sn"];
804
- if (opts?.flatten) if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
805
- else console.error("Flattening not supported for Stencil non-shadow slots");
854
+ if (opts?.flatten) {
855
+ if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
856
+ else console.error("Flattening not supported for Stencil non-shadow slots");
857
+ }
806
858
  const parent = this["s-cr"].parentElement;
807
859
  (parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes)).forEach((n) => {
808
860
  if (slotName === getSlotName(n)) toReturn.push(n);
@@ -893,8 +945,10 @@ const patchCloneNode = (HostElementPrototype) => {
893
945
  for (; i < childNodes.length; i++) {
894
946
  slotted = childNodes[i]["s-nr"];
895
947
  nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i][privateField]);
896
- if (slotted) if (clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
897
- else clonedNode.appendChild(slotted.cloneNode(true));
948
+ if (slotted) {
949
+ if (clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
950
+ else clonedNode.appendChild(slotted.cloneNode(true));
951
+ }
898
952
  if (nonStencilNode) clonedNode.appendChild(childNodes[i].cloneNode(true));
899
953
  }
900
954
  }
@@ -1097,11 +1151,11 @@ const patchChildSlotNodes = (elm) => {
1097
1151
  } });
1098
1152
  patchHostOriginalAccessor("firstChild", elm);
1099
1153
  Object.defineProperty(elm, "firstChild", { get() {
1100
- return this.childNodes[0];
1154
+ return this.childNodes[0] || null;
1101
1155
  } });
1102
1156
  patchHostOriginalAccessor("lastChild", elm);
1103
1157
  Object.defineProperty(elm, "lastChild", { get() {
1104
- return this.childNodes[this.childNodes.length - 1];
1158
+ return this.childNodes[this.childNodes.length - 1] || null;
1105
1159
  } });
1106
1160
  patchHostOriginalAccessor("childNodes", elm);
1107
1161
  Object.defineProperty(elm, "childNodes", { get() {
@@ -1147,7 +1201,7 @@ const patchNextSibling = (node) => {
1147
1201
  Object.defineProperty(node, "nextSibling", { get: function() {
1148
1202
  const parentNodes = this["s-ol"]?.parentNode.childNodes;
1149
1203
  const index = parentNodes?.indexOf(this);
1150
- if (parentNodes && index > -1) return parentNodes[index + 1];
1204
+ if (parentNodes && index > -1) return parentNodes[index + 1] || null;
1151
1205
  return this.__nextSibling;
1152
1206
  } });
1153
1207
  };
@@ -1162,7 +1216,7 @@ const patchNextElementSibling = (element) => {
1162
1216
  Object.defineProperty(element, "nextElementSibling", { get: function() {
1163
1217
  const parentEles = this["s-ol"]?.parentNode.children;
1164
1218
  const index = parentEles?.indexOf(this);
1165
- if (parentEles && index > -1) return parentEles[index + 1];
1219
+ if (parentEles && index > -1) return parentEles[index + 1] || null;
1166
1220
  return this.__nextElementSibling;
1167
1221
  } });
1168
1222
  };
@@ -1177,7 +1231,7 @@ const patchPreviousSibling = (node) => {
1177
1231
  Object.defineProperty(node, "previousSibling", { get: function() {
1178
1232
  const parentNodes = this["s-ol"]?.parentNode.childNodes;
1179
1233
  const index = parentNodes?.indexOf(this);
1180
- if (parentNodes && index > -1) return parentNodes[index - 1];
1234
+ if (parentNodes && index > -1) return parentNodes[index - 1] || null;
1181
1235
  return this.__previousSibling;
1182
1236
  } });
1183
1237
  };
@@ -1192,7 +1246,7 @@ const patchPreviousElementSibling = (element) => {
1192
1246
  Object.defineProperty(element, "previousElementSibling", { get: function() {
1193
1247
  const parentNodes = this["s-ol"]?.parentNode.children;
1194
1248
  const index = parentNodes?.indexOf(this);
1195
- if (parentNodes && index > -1) return parentNodes[index - 1];
1249
+ if (parentNodes && index > -1) return parentNodes[index - 1] || null;
1196
1250
  return this.__previousElementSibling;
1197
1251
  } });
1198
1252
  };
@@ -1367,7 +1421,7 @@ function queryNonceMetaTagContent(doc) {
1367
1421
  }
1368
1422
  //#endregion
1369
1423
  //#region src/runtime/styles.ts
1370
- const rootAppliedStyles = /* @__PURE__ */ new WeakMap();
1424
+ const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
1371
1425
  /**
1372
1426
  * Get or initialize the set of applied style scope IDs for a container element.
1373
1427
  *
@@ -1391,9 +1445,10 @@ const getAppliedStyles = (container) => {
1391
1445
  * @param prepend if true, add to beginning; if false, add to end
1392
1446
  */
1393
1447
  const adoptStylesheet = (container, sheet, prepend = false) => {
1394
- if (supportsMutableAdoptedStyleSheets) if (prepend) container.adoptedStyleSheets.unshift(sheet);
1395
- else container.adoptedStyleSheets.push(sheet);
1396
- else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
1448
+ if (supportsMutableAdoptedStyleSheets) {
1449
+ if (prepend) container.adoptedStyleSheets.unshift(sheet);
1450
+ else container.adoptedStyleSheets.push(sheet);
1451
+ } else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
1397
1452
  else container.adoptedStyleSheets = [...container.adoptedStyleSheets, sheet];
1398
1453
  };
1399
1454
  /**
@@ -1406,7 +1461,7 @@ const adoptStylesheet = (container, sheet, prepend = false) => {
1406
1461
  * @returns a new CSSStyleSheet for the correct window
1407
1462
  */
1408
1463
  const createStylesheetForWindow = (container, cssText) => {
1409
- const sheet = new (container.defaultView ?? container.ownerDocument?.defaultView ?? win).CSSStyleSheet();
1464
+ const sheet = new (container.defaultView ?? (container.ownerDocument?.defaultView) ?? win).CSSStyleSheet();
1410
1465
  sheet.replaceSync(cssText);
1411
1466
  return sheet;
1412
1467
  };
@@ -1477,41 +1532,46 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
1477
1532
  /**
1478
1533
  * attach styles at the end of the head tag if we render scoped components
1479
1534
  */
1480
- if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) if (styleContainerNode.nodeName === "HEAD") {
1481
- /**
1482
- * if the page contains preconnect links, we want to insert the styles
1483
- * after the last preconnect link to ensure the styles are preloaded
1484
- */
1485
- const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
1486
- const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
1487
- styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
1488
- } else if ("host" in styleContainerNode) if (supportsConstructableStylesheets) {
1489
- const stylesheet = createStylesheetForWindow(styleContainerNode, style);
1490
- adoptStylesheet(styleContainerNode, stylesheet, true);
1491
- } else {
1492
- /**
1493
- * If a scoped component is used within a shadow root and constructable stylesheets are
1494
- * not supported, we want to insert the styles at the beginning of the shadow root node.
1495
- *
1496
- * However, if there is already a style node in the shadow root, we just append
1497
- * the styles to the existing node.
1498
- *
1499
- * Note: order of how styles are applied is important. The new style node
1500
- * should be inserted before the existing style node.
1501
- *
1502
- * During HMR, create separate style elements for scoped components so they can be
1503
- * updated independently without affecting other components' styles.
1504
- */
1505
- const existingStyleContainer = styleContainerNode.querySelector("style");
1506
- if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
1507
- else styleContainerNode.prepend(styleElm);
1535
+ if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
1536
+ if (styleContainerNode.nodeName === "HEAD") {
1537
+ /**
1538
+ * if the page contains preconnect links, we want to insert the styles
1539
+ * after the last preconnect link to ensure the styles are preloaded
1540
+ */
1541
+ const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
1542
+ const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
1543
+ styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
1544
+ } else if ("host" in styleContainerNode) {
1545
+ if (supportsConstructableStylesheets) {
1546
+ const stylesheet = createStylesheetForWindow(styleContainerNode, style);
1547
+ adoptStylesheet(styleContainerNode, stylesheet, true);
1548
+ } else {
1549
+ /**
1550
+ * If a scoped component is used within a shadow root and constructable stylesheets are
1551
+ * not supported, we want to insert the styles at the beginning of the shadow root node.
1552
+ *
1553
+ * However, if there is already a style node in the shadow root, we just append
1554
+ * the styles to the existing node.
1555
+ *
1556
+ * Note: order of how styles are applied is important. The new style node
1557
+ * should be inserted before the existing style node.
1558
+ *
1559
+ * During HMR, create separate style elements for scoped components so they can be
1560
+ * updated independently without affecting other components' styles.
1561
+ */
1562
+ const existingStyleContainer = styleContainerNode.querySelector("style");
1563
+ if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
1564
+ else styleContainerNode.prepend(styleElm);
1565
+ }
1566
+ } else styleContainerNode.append(styleElm);
1508
1567
  }
1509
- else styleContainerNode.append(styleElm);
1510
1568
  /**
1511
1569
  * attach styles at the beginning of a shadow root node if we render shadow components
1512
1570
  */
1513
- if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
1514
- else styleContainerNode.insertBefore(styleElm, null);
1571
+ if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
1572
+ if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
1573
+ else styleContainerNode.insertBefore(styleElm, null);
1574
+ }
1515
1575
  if (appliedStyles) appliedStyles.add(scopeId);
1516
1576
  }
1517
1577
  } else if (BUILD.constructableCSS) {
@@ -1603,7 +1663,12 @@ const hydrateScopedToShadow = () => {
1603
1663
  if (!win.document) return;
1604
1664
  const styleElements = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
1605
1665
  let i = 0;
1606
- for (; i < styleElements.length; i++) registerStyle(styleElements[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styleElements[i].innerHTML), true);
1666
+ for (; i < styleElements.length; i++) {
1667
+ const scopeId = styleElements[i].getAttribute(HYDRATED_STYLE_ID);
1668
+ const existing = styles.get(scopeId);
1669
+ const allowCS = existing !== void 0 ? existing instanceof CSSStyleSheet : true;
1670
+ registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
1671
+ }
1607
1672
  };
1608
1673
  //#endregion
1609
1674
  //#region src/utils/helpers.ts
@@ -1735,11 +1800,15 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
1735
1800
  }
1736
1801
  } else if (BUILD.vdomStyle && memberName === "style") {
1737
1802
  if (BUILD.updatable) {
1738
- for (const prop in oldValue) if (!newValue || newValue[prop] == null) if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
1739
- else elm.style[prop] = "";
1803
+ for (const prop in oldValue) if (!newValue || newValue[prop] == null) {
1804
+ if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
1805
+ else elm.style[prop] = "";
1806
+ }
1807
+ }
1808
+ for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) {
1809
+ if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
1810
+ else elm.style[prop] = newValue[prop];
1740
1811
  }
1741
- for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
1742
- else elm.style[prop] = newValue[prop];
1743
1812
  } else if (BUILD.vdomKey && memberName === "key") {} else if (BUILD.vdomRef && memberName === "ref") {
1744
1813
  if (newValue) queueRefAttachment(newValue, elm);
1745
1814
  } else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
@@ -1748,11 +1817,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
1748
1817
  else memberName = ln[2] + memberName.slice(3);
1749
1818
  if (oldValue || newValue) {
1750
1819
  const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
1751
- memberName = memberName.replace(/* @__PURE__ */ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
1820
+ memberName = memberName.replace(/*@__PURE__*/ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
1752
1821
  if (oldValue) plt.rel(elm, memberName, oldValue, capture);
1753
1822
  if (newValue) plt.ael(elm, memberName, newValue, capture);
1754
1823
  }
1755
- } else if (BUILD.vdomPropOrAttr && memberName[0] === "a" && memberName.startsWith("attr:")) {
1824
+ } else if (BUILD.vdomPropOrAttrPrefix && memberName[0] === "a" && memberName.startsWith("attr:")) {
1756
1825
  const propName = memberName.slice(5);
1757
1826
  let attrName;
1758
1827
  if (BUILD.member) {
@@ -1767,7 +1836,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
1767
1836
  if (newValue !== false || elm.getAttribute(attrName) === "") elm.removeAttribute(attrName);
1768
1837
  } else elm.setAttribute(attrName, newValue === true ? "" : newValue);
1769
1838
  return;
1770
- } else if (BUILD.vdomPropOrAttr && memberName[0] === "p" && memberName.startsWith("prop:")) {
1839
+ } else if (BUILD.vdomPropOrAttrPrefix && memberName[0] === "p" && memberName.startsWith("prop:")) {
1771
1840
  const propName = memberName.slice(5);
1772
1841
  try {
1773
1842
  elm[propName] = newValue;
@@ -1787,8 +1856,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
1787
1856
  if (!elm.tagName.includes("-")) {
1788
1857
  const n = newValue == null ? "" : newValue;
1789
1858
  if (memberName === "list") isProp = false;
1790
- else if (oldValue == null || elm[memberName] !== n) if (typeof elm.__lookupSetter__(memberName) === "function") elm[memberName] = n;
1791
- else elm.setAttribute(memberName, n);
1859
+ else if (oldValue == null || elm[memberName] !== n) {
1860
+ if (typeof elm.__lookupSetter__(memberName) === "function") elm[memberName] = n;
1861
+ else elm.setAttribute(memberName, n);
1862
+ }
1792
1863
  } else if (elm[memberName] !== newValue) elm[memberName] = newValue;
1793
1864
  } catch {}
1794
1865
  /**
@@ -1806,8 +1877,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
1806
1877
  }
1807
1878
  }
1808
1879
  if (newValue == null || newValue === false) {
1809
- if (newValue !== false || elm.getAttribute(memberName) === "") if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
1810
- else elm.removeAttribute(memberName);
1880
+ if (newValue !== false || elm.getAttribute(memberName) === "" || flags & VNODE_FLAGS.isHost && !isEnumeratedAttribute(memberName)) {
1881
+ if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
1882
+ else elm.removeAttribute(memberName);
1883
+ }
1811
1884
  } else if ((!isProp || flags & VNODE_FLAGS.isHost || isSvg) && !isComplex && elm.nodeType === NODE_TYPE.ElementNode) {
1812
1885
  newValue = newValue === true ? "" : newValue;
1813
1886
  if (BUILD.vdomXlink && xlink) elm.setAttributeNS(XLINK_NS, memberName, newValue);
@@ -1815,6 +1888,18 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
1815
1888
  }
1816
1889
  }
1817
1890
  };
1891
+ /**
1892
+ * Attribute names that are enumerated (tri-state true/false/unset) rather than
1893
+ * plain boolean-presence attributes. An explicit `"false"` string on one of
1894
+ * these is semantically different from the attribute being absent, so a
1895
+ * reflected `false` value must not clear a pre-existing literal value.
1896
+ */
1897
+ const ENUMERATED_ATTRIBUTES = /*@__PURE__*/ new Set([
1898
+ "draggable",
1899
+ "contenteditable",
1900
+ "spellcheck"
1901
+ ]);
1902
+ const isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
1818
1903
  const parseClassListRegex = /\s/;
1819
1904
  /**
1820
1905
  * Parsed a string of classnames into an array
@@ -1938,6 +2023,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
1938
2023
  }
1939
2024
  } else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
1940
2025
  elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
2026
+ if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
1941
2027
  if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
1942
2028
  } else {
1943
2029
  if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
@@ -2213,8 +2299,10 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
2213
2299
  node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
2214
2300
  newStartVnode = newCh[++newStartIdx];
2215
2301
  }
2216
- if (node) if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
2217
- else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
2302
+ if (node) {
2303
+ if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
2304
+ else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
2305
+ }
2218
2306
  }
2219
2307
  if (oldStartIdx > oldEndIdx) addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
2220
2308
  else if (BUILD.updatable && newStartIdx > newEndIdx) removeVnodes(oldCh, oldStartIdx, oldEndIdx);
@@ -2301,6 +2389,30 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
2301
2389
  */
2302
2390
  const relocateNodes = [];
2303
2391
  /**
2392
+ * When a forwarded `<slot>` gets relocated, drag along any content already forwarded through it,
2393
+ * to wherever it just landed (or nowhere, to be hidden, if it didn't match anything).
2394
+ *
2395
+ * Runs as its own pass after {@link markSlotContentForRelocation} rather than inside it, so that
2396
+ * function's matching order - which hydration's node/comment ordering depends on - is untouched.
2397
+ */
2398
+ const carryContentWithRelocatedSlotRefs = () => {
2399
+ for (const relocateData of relocateNodes.slice()) {
2400
+ const marker = relocateData.$nodeToRelocate$;
2401
+ if (!marker["s-sr"]) continue;
2402
+ const carriedSiblings = getSlotChildSiblings(marker, marker["s-sn"] || "", false);
2403
+ for (const carriedSibling of carriedSiblings) {
2404
+ if (!carriedSibling["s-ol"]) continue;
2405
+ let siblingRelocateData = relocateNodes.find((r) => r.$nodeToRelocate$ === carriedSibling);
2406
+ if (!siblingRelocateData) {
2407
+ siblingRelocateData = { $nodeToRelocate$: carriedSibling };
2408
+ relocateNodes.push(siblingRelocateData);
2409
+ }
2410
+ siblingRelocateData.$slotRefNode$ = relocateData.$slotRefNode$;
2411
+ if (relocateData.$slotRefNode$) carriedSibling["s-sh"] = relocateData.$slotRefNode$["s-hn"];
2412
+ }
2413
+ }
2414
+ };
2415
+ /**
2304
2416
  * Mark the contents of a slot for relocation via adding references to them to
2305
2417
  * the {@link relocateNodes} data structure. The actual work of relocating them
2306
2418
  * will then be handled in {@link renderVdom}.
@@ -2405,7 +2517,7 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
2405
2517
  return newNode;
2406
2518
  }
2407
2519
  }
2408
- if (parent.__insertBefore) return parent.__insertBefore(newNode, reference);
2520
+ if (BUILD.slotRelocation && parent?.__insertBefore) return parent.__insertBefore(newNode, reference);
2409
2521
  else return parent?.insertBefore(newNode, reference);
2410
2522
  };
2411
2523
  /**
@@ -2499,6 +2611,7 @@ render() {
2499
2611
  plt.$flags$ |= PLATFORM_FLAGS.isTmpDisconnected;
2500
2612
  if (checkSlotRelocate) {
2501
2613
  markSlotContentForRelocation(rootVnode.$elm$);
2614
+ carryContentWithRelocatedSlotRefs();
2502
2615
  for (const relocateData of relocateNodes) {
2503
2616
  const nodeToRelocate = relocateData.$nodeToRelocate$;
2504
2617
  if (!nodeToRelocate["s-ol"] && win.document) {
@@ -2558,7 +2671,7 @@ render() {
2558
2671
  }
2559
2672
  if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
2560
2673
  const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
2561
- for (const childNode of children) if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
2674
+ for (const childNode of children) if (childNode["s-hn"] !== hostTagName && childNode["s-sh"] !== hostTagName) {
2562
2675
  if (isInitialLoad && childNode["s-ih"] == null) childNode["s-ih"] = childNode.hidden ?? false;
2563
2676
  if (childNode.nodeType === NODE_TYPE.ElementNode) childNode.hidden = true;
2564
2677
  else if (childNode.nodeType === NODE_TYPE.TextNode && !!childNode.nodeValue.trim()) {
@@ -2576,16 +2689,58 @@ const slotReferenceDebugNode = (slotVNode) => win.document?.createComment(`<slot
2576
2689
  const originalLocationDebugNode = (nodeToRelocate) => win.document?.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`));
2577
2690
  //#endregion
2578
2691
  //#region src/runtime/update-component.ts
2692
+ /**
2693
+ * Get a promise that resolves once `hostRef`'s real `connectedCallback` has fired for the first time.
2694
+ *
2695
+ * @param hostRef the component's host reference
2696
+ * @returns a promise that resolves once the component's real `connectedCallback` has fired
2697
+ */
2698
+ const ensureFirstConnectPromise = (hostRef) => {
2699
+ if (!hostRef.$onFirstConnectPromise$) hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
2700
+ return hostRef.$onFirstConnectPromise$;
2701
+ };
2702
+ /**
2703
+ * Resolve `hostRef`'s first-connect promise and flag it connected. Called once this
2704
+ * component's real `connectedCallback` fires, plus from error/disconnect cleanup so a
2705
+ * component that never connects can't hang an ancestor or descendant forever.
2706
+ *
2707
+ * @param hostRef the component's host reference
2708
+ */
2709
+ const markFirstConnected = (hostRef) => {
2710
+ hostRef.$flags$ |= HOST_FLAGS.hasFiredConnected;
2711
+ hostRef.$onFirstConnectResolve$?.();
2712
+ hostRef.$onFirstConnectResolve$ = void 0;
2713
+ };
2714
+ /**
2715
+ * Wait for `ancestorElm` to be defined and its real `connectedCallback` to have completed.
2716
+ * Shared by the lazy ({@link initializeComponent}) and standalone (`bootstrap-standalone.ts`)
2717
+ * `connectedCallback` paths so a component never connects before its nearest Stencil
2718
+ * ancestor, regardless of load order. Both call sites already check `BUILD.asyncLoading` and
2719
+ * that an ancestor exists before calling this. Lazy's proxy classes are always pre-defined,
2720
+ * so the `whenDefined` wait is a no-op there - it only does real work for standalone's
2721
+ * autoloader, where the ancestor tag may not be defined yet.
2722
+ *
2723
+ * @param ancestorElm the nearest Stencil ancestor element
2724
+ */
2725
+ const awaitAncestorConnected = async (ancestorElm) => {
2726
+ let ancestorHostRef = getHostRef(ancestorElm);
2727
+ if (!BUILD.lazyLoad && !ancestorHostRef) {
2728
+ await getRegistry().whenDefined(ancestorElm.tagName.toLowerCase());
2729
+ ancestorHostRef = getHostRef(ancestorElm);
2730
+ }
2731
+ if (ancestorHostRef && !(ancestorHostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) await ensureFirstConnectPromise(ancestorHostRef);
2732
+ };
2579
2733
  const attachToAncestor = (hostRef, ancestorComponent) => {
2580
2734
  if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
2581
2735
  const index = ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = () => {
2582
2736
  ancestorComponent["s-p"].splice(index - 1, 1);
2583
2737
  r();
2584
2738
  }));
2739
+ if (ancestorComponent["s-pc"]) ancestorComponent["s-pc"].push(ensureFirstConnectPromise(hostRef));
2585
2740
  }
2586
2741
  };
2587
2742
  const scheduleUpdate = (hostRef, isInitialLoad) => {
2588
- if (BUILD.taskQueue && BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
2743
+ if (BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
2589
2744
  if (BUILD.asyncLoading && hostRef.$flags$ & HOST_FLAGS.isWaitingForChildren) {
2590
2745
  hostRef.$flags$ |= HOST_FLAGS.needsRerender;
2591
2746
  return;
@@ -2593,6 +2748,8 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
2593
2748
  attachToAncestor(hostRef, hostRef.$ancestorComponent$);
2594
2749
  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
2595
2750
  if (isInitialLoad) {
2751
+ const pendingConnects = BUILD.asyncLoading ? hostRef.$hostElement$["s-pc"] : void 0;
2752
+ if (pendingConnects && pendingConnects.length > 0) return Promise.all(pendingConnects).then(dispatch).catch(dispatch);
2596
2753
  queueMicrotask(() => {
2597
2754
  dispatch();
2598
2755
  });
@@ -2632,10 +2789,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
2632
2789
  let maybePromise;
2633
2790
  if (isInitialLoad) {
2634
2791
  if (BUILD.lazyLoad) {
2635
- if (BUILD.slotRelocation && hostRef.$deferredConnectedCallback$) {
2636
- hostRef.$deferredConnectedCallback$ = false;
2637
- safeCall(instance, "connectedCallback", void 0, elm);
2638
- }
2639
2792
  if (BUILD.hostListener) {
2640
2793
  hostRef.$flags$ |= HOST_FLAGS.isListenReady;
2641
2794
  if (hostRef.$queuedListeners$) {
@@ -2648,6 +2801,14 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
2648
2801
  if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillLoad");
2649
2802
  maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
2650
2803
  } else {
2804
+ if (BUILD.updatable && hostRef.$queuedPropChanges$) {
2805
+ const changes = hostRef.$queuedPropChanges$;
2806
+ hostRef.$queuedPropChanges$ = void 0;
2807
+ if (safeCall(instance, "componentShouldUpdate", changes, elm) === false) {
2808
+ hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
2809
+ return;
2810
+ }
2811
+ }
2651
2812
  if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillUpdate");
2652
2813
  maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
2653
2814
  }
@@ -2762,7 +2923,6 @@ let renderingRef = null;
2762
2923
  const callRender = (hostRef, instance, elm, isInitialLoad) => {
2763
2924
  const allRenderFn = !!BUILD.allRenderFn;
2764
2925
  const lazyLoad = !!BUILD.lazyLoad;
2765
- const taskQueue = !!BUILD.taskQueue;
2766
2926
  const updatable = !!BUILD.updatable;
2767
2927
  try {
2768
2928
  renderingRef = instance;
@@ -2771,14 +2931,17 @@ const callRender = (hostRef, instance, elm, isInitialLoad) => {
2771
2931
  * method, so we can call the method immediately. If not, check before calling it.
2772
2932
  */
2773
2933
  instance = allRenderFn ? instance.render() : instance.render && instance.render();
2774
- if (updatable && taskQueue) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
2934
+ if (updatable) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
2775
2935
  if (updatable || lazyLoad) hostRef.$flags$ |= HOST_FLAGS.hasRendered;
2776
- if (BUILD.hasRenderFn || BUILD.reflect) if (BUILD.vdomRender || BUILD.reflect) if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
2777
- else renderVdom(hostRef, instance, isInitialLoad);
2778
- else {
2779
- const shadowRoot = elm.shadowRoot;
2780
- if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
2781
- else elm.textContent = instance;
2936
+ if (BUILD.hasRenderFn || BUILD.reflect) {
2937
+ if (BUILD.vdomRender || BUILD.reflect) {
2938
+ if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
2939
+ else renderVdom(hostRef, instance, isInitialLoad);
2940
+ } else {
2941
+ const shadowRoot = elm.shadowRoot;
2942
+ if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
2943
+ else elm.textContent = instance;
2944
+ }
2782
2945
  }
2783
2946
  } catch (e) {
2784
2947
  consoleError(e, hostRef.$hostElement$);
@@ -2918,17 +3081,19 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
2918
3081
  const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
2919
3082
  for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
2920
3083
  if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
2921
- const sig = signal(hostRef.$instanceValues$.get(memberName));
3084
+ const initialVal = hostRef.$instanceValues$.get(memberName);
3085
+ const sig = signal(initialVal);
2922
3086
  hostRef.$signalValues$.set(memberName, sig);
2923
3087
  let prevScheduleVal = sig.peek();
2924
3088
  disposers.push(effect(() => {
2925
3089
  const newVal = sig.value;
2926
3090
  if (hostRef.$flags$ & HOST_FLAGS.hasRendered) {
2927
3091
  if (instance?.componentShouldUpdate) {
2928
- if (instance.componentShouldUpdate(newVal, prevScheduleVal, memberName) === false && !(hostRef.$flags$ & HOST_FLAGS.isQueuedForUpdate)) {
2929
- prevScheduleVal = newVal;
2930
- return;
2931
- }
3092
+ const changes = hostRef.$queuedPropChanges$ ||= {};
3093
+ changes[memberName] = {
3094
+ newVal,
3095
+ oldVal: changes[memberName]?.oldVal ?? prevScheduleVal
3096
+ };
2932
3097
  }
2933
3098
  if (!(hostRef.$flags$ & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
2934
3099
  }
@@ -2963,7 +3128,8 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
2963
3128
  consoleError(e, elm);
2964
3129
  }
2965
3130
  }));
2966
- elm[STENCIL_SIGNALS_SYMBOL] = new Map([...hostRef.$signalValues$].filter(([k]) => (cmpMeta.$members$?.[k]?.[0] ?? 0) & MEMBER_FLAGS.Prop));
3131
+ const publicSignals = new Map([...hostRef.$signalValues$].filter(([k]) => (cmpMeta.$members$?.[k]?.[0] ?? 0) & MEMBER_FLAGS.Prop));
3132
+ elm[STENCIL_SIGNALS_SYMBOL] = publicSignals;
2967
3133
  hostRef.$signalCleanup$ = () => {
2968
3134
  disposers.forEach((d) => d());
2969
3135
  elm[STENCIL_SIGNALS_SYMBOL] = void 0;
@@ -3012,24 +3178,30 @@ const h = (nodeName, vnodeData, ...children) => {
3012
3178
  for (let i = 0; i < c.length; i++) {
3013
3179
  child = c[i];
3014
3180
  if (Array.isArray(child)) walk(child);
3015
- else if (child != null && typeof child !== "boolean") if (BUILD.vdomSignals && isSignalLike(child)) {
3016
- const sigVNode = newVNode(null, String(child.peek()));
3017
- sigVNode.$signal$ = child;
3018
- vNodeChildren.push(sigVNode);
3019
- lastSimple = false;
3020
- } else {
3021
- if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
3022
- else if (BUILD.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) consoleDevError(`vNode passed as children has unexpected type.
3023
- Make sure it's using the correct h() function.
3024
- Empty objects can also be the cause, look for JSX comments that became objects.`);
3025
- if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
3026
- else vNodeChildren.push(simple ? newVNode(null, child) : child);
3027
- lastSimple = simple;
3181
+ else if (child != null && typeof child !== "boolean") {
3182
+ if (BUILD.vdomSignals && isSignalLike(child)) {
3183
+ const sigVNode = newVNode(null, String(child.peek()));
3184
+ sigVNode.$signal$ = child;
3185
+ vNodeChildren.push(sigVNode);
3186
+ lastSimple = false;
3187
+ } else {
3188
+ if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
3189
+ else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
3190
+ if (BUILD.isDev) consoleDevError(`vNode passed as children has unexpected type.
3191
+ Make sure it's using the correct h() function.
3192
+ Empty objects can also be the cause, look for JSX comments that became objects.`);
3193
+ else consoleError("Invalid vNode child");
3194
+ continue;
3195
+ }
3196
+ if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
3197
+ else vNodeChildren.push(simple ? newVNode(null, child) : child);
3198
+ lastSimple = simple;
3199
+ }
3028
3200
  }
3029
3201
  }
3030
3202
  };
3031
3203
  walk(children);
3032
- if (vnodeData) {
3204
+ if (vnodeData && typeof vnodeData === "object") {
3033
3205
  if (BUILD.isDev && nodeName === "input") validateInputProperties(vnodeData);
3034
3206
  if (BUILD.vdomKey && vnodeData.key) key = vnodeData.key;
3035
3207
  if (BUILD.slotRelocation && vnodeData.name) slotName = vnodeData.name;
@@ -3130,7 +3302,7 @@ const convertToPrivate = (node) => {
3130
3302
  /**
3131
3303
  * Validates the ordering of attributes on an input element
3132
3304
  *
3133
- * @param inputElm the element to validate
3305
+ * @param inputElm the vnode data (JSX props) for the element to validate
3134
3306
  */
3135
3307
  const validateInputProperties = (inputElm) => {
3136
3308
  const props = Object.keys(inputElm);
@@ -4009,14 +4181,15 @@ const parsePropertyValue = (propValue, propType, isFormAssociated) => {
4009
4181
  /**
4010
4182
  * ensure this value is of the correct prop type
4011
4183
  */
4012
- if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean)
4013
- /**
4014
- * For form-associated components, according to HTML spec, the presence of any boolean attribute
4015
- * (regardless of its value, even "false") should make the property true.
4016
- * For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
4017
- */
4018
- if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
4019
- else return propValue === "false" ? false : propValue === "" || !!propValue;
4184
+ if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean) {
4185
+ /**
4186
+ * For form-associated components, according to HTML spec, the presence of any boolean attribute
4187
+ * (regardless of its value, even "false") should make the property true.
4188
+ * For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
4189
+ */
4190
+ if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
4191
+ else return propValue === "false" ? false : propValue === "" || !!propValue;
4192
+ }
4020
4193
  /**
4021
4194
  * force it to be a number
4022
4195
  */
@@ -4104,7 +4277,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
4104
4277
  }
4105
4278
  if (BUILD.updatable && flags & HOST_FLAGS.hasRendered) {
4106
4279
  if (instance.componentShouldUpdate) {
4107
- if (instance.componentShouldUpdate(newVal, oldVal, propName) === false && !(flags & HOST_FLAGS.isQueuedForUpdate)) return;
4280
+ const changes = hostRef.$queuedPropChanges$ ||= {};
4281
+ changes[propName] = {
4282
+ newVal,
4283
+ oldVal: changes[propName]?.oldVal ?? oldVal
4284
+ };
4108
4285
  }
4109
4286
  if (!(flags & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
4110
4287
  }
@@ -4238,11 +4415,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
4238
4415
  };
4239
4416
  for (const deserializer of cmpMeta.$deserializers$[propName]) {
4240
4417
  const [[methodName]] = Object.entries(deserializer);
4241
- if (BUILD.lazyLoad) if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
4242
- else hostRef.$fetchedCbList$.push(() => {
4243
- setVal(methodName, hostRef.$lazyInstance$);
4244
- });
4245
- else setVal(methodName, this);
4418
+ if (BUILD.lazyLoad) {
4419
+ if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
4420
+ else hostRef.$fetchedCbList$.push(() => {
4421
+ setVal(methodName, hostRef.$lazyInstance$);
4422
+ });
4423
+ } else setVal(methodName, this);
4246
4424
  }
4247
4425
  return;
4248
4426
  } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) return;
@@ -4266,7 +4444,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
4266
4444
  if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
4267
4445
  });
4268
4446
  };
4269
- Cstr.observedAttributes = Array.from(new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
4447
+ Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
4270
4448
  const attrName = m[1] || propName;
4271
4449
  attrNameToPropName.set(attrName, propName);
4272
4450
  if (BUILD.reflect && m[0] & MEMBER_FLAGS.ReflectAttr) cmpMeta.$attrsToReflect$?.push([propName, attrName]);
@@ -4293,6 +4471,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
4293
4471
  try {
4294
4472
  if ((hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0) {
4295
4473
  hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent;
4474
+ hostRef.$flags$ &= ~HOST_FLAGS.hasFailedLoad;
4296
4475
  const bundleId = cmpMeta.$lazyBundleId$;
4297
4476
  if (BUILD.lazyLoad && bundleId) {
4298
4477
  const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
@@ -4301,7 +4480,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
4301
4480
  Cstr = await CstrImport;
4302
4481
  endLoad();
4303
4482
  } else Cstr = CstrImport;
4304
- if (!Cstr) throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
4483
+ if (!Cstr) {
4484
+ hostRef.$flags$ &= ~HOST_FLAGS.hasInitializedComponent;
4485
+ hostRef.$loadRetryCount$ = (hostRef.$loadRetryCount$ ?? 0) + 1;
4486
+ if (hostRef.$loadRetryCount$ < 3) hostRef.$flags$ |= HOST_FLAGS.hasFailedLoad;
4487
+ throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
4488
+ }
4305
4489
  if (BUILD.member && !Cstr.isProxied) {
4306
4490
  if (BUILD.propChangeCallback) {
4307
4491
  cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
@@ -4320,8 +4504,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
4320
4504
  }
4321
4505
  if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
4322
4506
  endNewInstance();
4323
- if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) fireConnectedCallback(hostRef.$lazyInstance$, elm);
4324
- else hostRef.$deferredConnectedCallback$ = true;
4507
+ if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
4508
+ if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
4509
+ fireConnectedCallback(hostRef.$lazyInstance$, elm);
4510
+ if (BUILD.asyncLoading) markFirstConnected(hostRef);
4511
+ } else queueMicrotask(() => {
4512
+ fireConnectedCallback(hostRef.$lazyInstance$, elm);
4513
+ if (BUILD.asyncLoading) markFirstConnected(hostRef);
4514
+ });
4325
4515
  } else Cstr = elm.constructor;
4326
4516
  if (BUILD.style && Cstr && Cstr.style) {
4327
4517
  /**
@@ -4380,7 +4570,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
4380
4570
  hostRef.$onRenderResolve$();
4381
4571
  hostRef.$onRenderResolve$ = void 0;
4382
4572
  }
4383
- if (BUILD.asyncLoading && hostRef.$onReadyResolve$) hostRef.$onReadyResolve$(elm);
4573
+ if (BUILD.asyncLoading) markFirstConnected(hostRef);
4574
+ if (BUILD.asyncLoading && hostRef.$onReadyResolve$ && !(hostRef.$flags$ & HOST_FLAGS.hasFailedLoad)) hostRef.$onReadyResolve$(elm);
4384
4575
  }
4385
4576
  };
4386
4577
  const fireConnectedCallback = (instance, elm) => {
@@ -4443,6 +4634,7 @@ const connectedCallback = (elm) => {
4443
4634
  } else {
4444
4635
  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
4445
4636
  if (hostRef?.$lazyInstance$) fireConnectedCallback(hostRef.$lazyInstance$, elm);
4637
+ else if (hostRef.$flags$ & HOST_FLAGS.hasFailedLoad) setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
4446
4638
  else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
4447
4639
  }
4448
4640
  endConnected();
@@ -4472,6 +4664,7 @@ const disconnectedCallback = async (elm) => {
4472
4664
  hostRef.$signalCleanup$();
4473
4665
  hostRef.$signalCleanup$ = void 0;
4474
4666
  }
4667
+ if (BUILD.asyncLoading && hostRef && !(hostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) markFirstConnected(hostRef);
4475
4668
  if (!BUILD.lazyLoad) disconnectInstance(elm);
4476
4669
  else if (hostRef?.$lazyInstance$) disconnectInstance(hostRef.$lazyInstance$, elm);
4477
4670
  else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
@@ -4519,7 +4712,6 @@ const hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
4519
4712
  };
4520
4713
  const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
4521
4714
  const modulePath = hostElement.constructor.__stencil_module__;
4522
- console.log(`[Stencil HMR] hmrStandalone <${cmpMeta.$tagName$}> modulePath:`, modulePath);
4523
4715
  if (!modulePath) {
4524
4716
  console.warn(`[Stencil HMR] No __stencil_module__ on <${cmpMeta.$tagName$}> constructor - was this built with devMode?`);
4525
4717
  return;
@@ -4532,18 +4724,39 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
4532
4724
  const NewClass = Object.values(newModule).find((v) => typeof v === "function" && v.is === cmpMeta.$tagName$) ?? newModule.default;
4533
4725
  if (!NewClass) return;
4534
4726
  const ctor = customElements.get(cmpMeta.$tagName$);
4535
- if (ctor) for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
4536
- if (key === "constructor") continue;
4537
- Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
4727
+ if (ctor) {
4728
+ for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
4729
+ if (key === "constructor") continue;
4730
+ Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
4731
+ }
4732
+ const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
4733
+ if (styleDesc) {
4734
+ Object.defineProperty(ctor, "style", styleDesc);
4735
+ const newStyle = NewClass.style;
4736
+ if (newStyle) {
4737
+ const scopeId = getScopeId(cmpMeta);
4738
+ const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
4739
+ console.log("[stencil-hmr] registerStyle", {
4740
+ tag: cmpMeta.$tagName$,
4741
+ scopeId,
4742
+ isShadow,
4743
+ cssLen: newStyle.length
4744
+ });
4745
+ registerStyle(scopeId, newStyle, isShadow);
4746
+ }
4747
+ }
4538
4748
  }
4749
+ const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
4539
4750
  document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
4540
- if (BUILD.hostListener) {
4541
- const hostRef = getHostRef(el);
4542
- if (hostRef?.$rmListeners$) {
4543
- hostRef.$rmListeners$.map((rmListener) => rmListener());
4544
- hostRef.$rmListeners$ = void 0;
4545
- addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
4546
- }
4751
+ const hostRef = getHostRef(el);
4752
+ if (BUILD.hostListener && hostRef?.$rmListeners$) {
4753
+ hostRef.$rmListeners$.map((rmListener) => rmListener());
4754
+ hostRef.$rmListeners$ = void 0;
4755
+ addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
4756
+ }
4757
+ if (!isShadow && hostRef) {
4758
+ console.log("[stencil-hmr] calling attachStyles for", cmpMeta.$tagName$);
4759
+ attachStyles(hostRef);
4547
4760
  }
4548
4761
  forceUpdate(el);
4549
4762
  });
@@ -4554,7 +4767,9 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
4554
4767
  //#endregion
4555
4768
  //#region src/runtime/bootstrap-standalone.ts
4556
4769
  const defineCustomElement = (Cstr, compactMeta) => {
4557
- customElements.define(transformTag(compactMeta[1]), proxyCustomElement(Cstr, compactMeta));
4770
+ const tag = transformTag(compactMeta[1]);
4771
+ const proxied = proxyCustomElement(Cstr, compactMeta);
4772
+ if (!customElements.get(tag)) customElements.define(tag, proxied);
4558
4773
  };
4559
4774
  const proxyCustomElement = (Cstr, compactMeta) => {
4560
4775
  if (BUILD.profile && performance.mark && performance.getEntriesByName("st:app:start", "mark").length === 0) performance.mark("st:app:start");
@@ -4575,18 +4790,20 @@ const proxyCustomElement = (Cstr, compactMeta) => {
4575
4790
  hmrStart(this, cmpMeta, hmrVersionId);
4576
4791
  };
4577
4792
  if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(Cstr.prototype);
4578
- if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
4579
- else {
4580
- if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
4581
- if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
4582
- patchSlotAppendChild(Cstr.prototype);
4583
- patchSlotAppend(Cstr.prototype);
4584
- patchSlotPrepend(Cstr.prototype);
4585
- patchSlotInsertAdjacentHTML(Cstr.prototype);
4586
- patchInsertBefore(Cstr.prototype);
4587
- patchSlotRemoveChild(Cstr.prototype);
4793
+ if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
4794
+ if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
4795
+ else {
4796
+ if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
4797
+ if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
4798
+ patchSlotAppendChild(Cstr.prototype);
4799
+ patchSlotAppend(Cstr.prototype);
4800
+ patchSlotPrepend(Cstr.prototype);
4801
+ patchSlotInsertAdjacentHTML(Cstr.prototype);
4802
+ patchInsertBefore(Cstr.prototype);
4803
+ patchSlotRemoveChild(Cstr.prototype);
4804
+ }
4805
+ if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
4588
4806
  }
4589
- if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
4590
4807
  }
4591
4808
  if (BUILD.hydrateClientSide && BUILD.shadowDom) hydrateScopedToShadow();
4592
4809
  const originalConnectedCallback = Cstr.prototype.connectedCallback;
@@ -4599,19 +4816,26 @@ const proxyCustomElement = (Cstr, compactMeta) => {
4599
4816
  componentOnReady() {
4600
4817
  return getHostRef(this)?.$onReadyPromise$;
4601
4818
  },
4602
- connectedCallback() {
4603
- if (!this.__hasHostListenerAttached) {
4604
- const hostRef = getHostRef(this);
4819
+ async connectedCallback() {
4820
+ const isFirstConnect = !this.__hasHostListenerAttached;
4821
+ let hostRef;
4822
+ if (isFirstConnect) {
4823
+ hostRef = getHostRef(this);
4605
4824
  if (!hostRef) return;
4606
4825
  addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
4607
4826
  this.__hasHostListenerAttached = true;
4608
4827
  }
4609
4828
  connectedCallback(this);
4610
- if (originalConnectedCallback) originalConnectedCallback.call(this);
4829
+ if (BUILD.asyncLoading && hostRef && hostRef.$ancestorComponent$) {
4830
+ await awaitAncestorConnected(hostRef.$ancestorComponent$);
4831
+ if (!this.isConnected) return;
4832
+ }
4833
+ if (originalConnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalConnectedCallback.call(this);
4834
+ if (BUILD.asyncLoading && hostRef) markFirstConnected(hostRef);
4611
4835
  },
4612
4836
  disconnectedCallback() {
4613
4837
  disconnectedCallback(this);
4614
- if (originalDisconnectedCallback) originalDisconnectedCallback.call(this);
4838
+ if (originalDisconnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalDisconnectedCallback.call(this);
4615
4839
  },
4616
4840
  __attachShadow() {
4617
4841
  const isClosed = BUILD.shadowModeClosed && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed);
@@ -4665,8 +4889,8 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
4665
4889
  const exclude = options.exclude || [];
4666
4890
  const _reg = options.registry ?? getRegistry();
4667
4891
  const head = win.document.head;
4668
- const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
4669
- const dataStyles = /* @__PURE__ */ win.document.createElement("style");
4892
+ const metaCharset = /*@__PURE__*/ head.querySelector("meta[charset]");
4893
+ const dataStyles = /*@__PURE__*/ win.document.createElement("style");
4670
4894
  const deferredConnectedCallbacks = [];
4671
4895
  let appLoadFallback;
4672
4896
  let isBootstrapping = true;
@@ -4734,8 +4958,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
4734
4958
  *
4735
4959
  * Also remove the reference from `deferredConnectedCallbacks` array
4736
4960
  * otherwise removed instances won't get garbage collected.
4961
+ *
4962
+ * Use `nextTick` (microtask) rather than `plt.raf` since
4963
+ * `requestAnimationFrame` callbacks do not fire while `document.hidden`
4737
4964
  */
4738
- plt.raf(() => {
4965
+ nextTick(() => {
4739
4966
  const hostRef = getHostRef(this);
4740
4967
  if (!hostRef) return;
4741
4968
  const i = deferredConnectedCallbacks.findIndex((host) => host === this);
@@ -4748,18 +4975,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
4748
4975
  }
4749
4976
  };
4750
4977
  if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(HostElement.prototype);
4751
- if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
4752
- else {
4753
- if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
4754
- if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
4755
- patchSlotAppendChild(HostElement.prototype);
4756
- patchSlotAppend(HostElement.prototype);
4757
- patchSlotPrepend(HostElement.prototype);
4758
- patchSlotInsertAdjacentHTML(HostElement.prototype);
4759
- patchInsertBefore(HostElement.prototype);
4760
- patchSlotRemoveChild(HostElement.prototype);
4978
+ if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
4979
+ if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
4980
+ else {
4981
+ if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
4982
+ if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
4983
+ patchSlotAppendChild(HostElement.prototype);
4984
+ patchSlotAppend(HostElement.prototype);
4985
+ patchSlotPrepend(HostElement.prototype);
4986
+ patchSlotInsertAdjacentHTML(HostElement.prototype);
4987
+ patchInsertBefore(HostElement.prototype);
4988
+ patchSlotRemoveChild(HostElement.prototype);
4989
+ }
4990
+ if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
4761
4991
  }
4762
- if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
4763
4992
  }
4764
4993
  if (BUILD.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated) HostElement.formAssociated = true;
4765
4994
  if (BUILD.hotModuleReplacement) HostElement.prototype["s-hmr"] = function(hmrVersionId) {
@@ -4805,9 +5034,10 @@ const addHostEventListeners = (elm, hostRef, listeners) => {
4805
5034
  };
4806
5035
  const hostListenerProxy = (hostRef, methodName) => (ev) => {
4807
5036
  try {
4808
- if (BUILD.lazyLoad) if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
4809
- else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
4810
- else hostRef.$hostElement$[methodName](ev);
5037
+ if (BUILD.lazyLoad) {
5038
+ if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
5039
+ else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
5040
+ } else hostRef.$hostElement$[methodName](ev);
4811
5041
  } catch (e) {
4812
5042
  consoleError(e, hostRef.$hostElement$);
4813
5043
  }
@@ -4841,6 +5071,73 @@ const setNonce = (nonce) => plt.$nonce$ = nonce;
4841
5071
  //#region src/runtime/platform-options.ts
4842
5072
  const setPlatformOptions = (opts) => Object.assign(plt, opts);
4843
5073
  //#endregion
5074
+ //#region src/runtime/reactive-controller.ts
5075
+ const ReactiveControllerHost = (Base) => class ReactiveControllerHostMixin extends Base {
5076
+ controllers = /* @__PURE__ */ new Set();
5077
+ #connected = false;
5078
+ #updateCompleteResolvers = [];
5079
+ addController(controller) {
5080
+ this.controllers.add(controller);
5081
+ if (this.#connected) controller.hostConnected?.();
5082
+ }
5083
+ removeController(controller) {
5084
+ this.controllers.delete(controller);
5085
+ }
5086
+ requestUpdate() {
5087
+ forceUpdate(this);
5088
+ }
5089
+ get updateComplete() {
5090
+ return new Promise((resolve) => this.#updateCompleteResolvers.push(resolve));
5091
+ }
5092
+ connectedCallback() {
5093
+ super.connectedCallback?.();
5094
+ this.#connected = true;
5095
+ const el = getElement(this);
5096
+ if (el && el !== this) {
5097
+ el.addController = (controller) => this.addController(controller);
5098
+ el.removeController = (controller) => this.removeController(controller);
5099
+ el.requestUpdate = () => this.requestUpdate();
5100
+ Object.defineProperty(el, "updateComplete", {
5101
+ configurable: true,
5102
+ get: () => this.updateComplete
5103
+ });
5104
+ }
5105
+ this.controllers.forEach((c) => c.hostConnected?.());
5106
+ }
5107
+ disconnectedCallback() {
5108
+ super.disconnectedCallback?.();
5109
+ this.#connected = false;
5110
+ this.controllers.forEach((c) => c.hostDisconnected?.());
5111
+ }
5112
+ async componentWillLoad() {
5113
+ await super.componentWillLoad?.();
5114
+ await Promise.all([...this.controllers].map((c) => c.hostWillLoad?.()));
5115
+ }
5116
+ componentDidLoad() {
5117
+ super.componentDidLoad?.();
5118
+ this.controllers.forEach((c) => c.hostDidLoad?.());
5119
+ }
5120
+ async componentWillRender() {
5121
+ await super.componentWillRender?.();
5122
+ await Promise.all([...this.controllers].map((c) => c.hostWillRender?.()));
5123
+ }
5124
+ componentDidRender() {
5125
+ super.componentDidRender?.();
5126
+ this.controllers.forEach((c) => c.hostDidRender?.());
5127
+ const resolvers = this.#updateCompleteResolvers;
5128
+ this.#updateCompleteResolvers = [];
5129
+ resolvers.forEach((resolve) => resolve(true));
5130
+ }
5131
+ async componentWillUpdate() {
5132
+ await super.componentWillUpdate?.();
5133
+ await Promise.all([...this.controllers].map((c) => c.hostWillUpdate?.()));
5134
+ }
5135
+ componentDidUpdate() {
5136
+ super.componentDidUpdate?.();
5137
+ this.controllers.forEach((c) => c.hostDidUpdate?.());
5138
+ }
5139
+ };
5140
+ //#endregion
4844
5141
  //#region src/runtime/render.ts
4845
5142
  /**
4846
5143
  * A WeakMap to persist HostRef objects across multiple render() calls to the
@@ -4927,4 +5224,4 @@ function hasKeys(obj) {
4927
5224
  return false;
4928
5225
  }
4929
5226
  //#endregion
4930
- export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
5227
+ export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };