@stencil/core 4.19.2 → 4.20.0

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.20.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -412,17 +412,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         }
       }
     }
-    for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
-      clientHydrate(
-        parentVNode,
-        childRenderNodes,
-        slotNodes,
-        shadowRootNodes,
-        hostElm,
-        node.childNodes[i2],
-        hostId
-      );
-    }
     if (node.shadowRoot) {
       for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
         clientHydrate(
@@ -436,6 +425,17 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         );
       }
     }
+    for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
+      clientHydrate(
+        parentVNode,
+        childRenderNodes,
+        slotNodes,
+        shadowRootNodes,
+        hostElm,
+        node.childNodes[i2],
+        hostId
+      );
+    }
   } else if (node.nodeType === 8 /* CommentNode */) {
     childIdSplt = node.nodeValue.split(".");
     if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
@@ -513,14 +513,14 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
 var initializeDocumentHydrate = (node, orgLocNodes) => {
   if (node.nodeType === 1 /* ElementNode */) {
     let i2 = 0;
-    for (; i2 < node.childNodes.length; i2++) {
-      initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
-    }
     if (node.shadowRoot) {
-      for (i2 = 0; i2 < node.shadowRoot.childNodes.length; i2++) {
+      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
         initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
       }
     }
+    for (i2 = 0; i2 < node.childNodes.length; i2++) {
+      initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
+    }
   } else if (node.nodeType === 8 /* CommentNode */) {
     const childIdSplt = node.nodeValue.split(".");
     if (childIdSplt[0] === ORG_LOCATION_ID) {
@@ -639,10 +639,21 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          if (BUILD7.hydrateServerSide || BUILD7.hotModuleReplacement) {
+          if ((BUILD7.hydrateServerSide || BUILD7.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
           }
-          styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
+          const injectStyle = (
+            /**
+             * we render a scoped component
+             */
+            !(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) || /**
+             * we are using shadow dom and render the style tag within the shadowRoot
+             */
+            cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD"
+          );
+          if (injectStyle) {
+            styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
+          }
         }
         if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
           styleElm.innerHTML += SLOT_FB_CSS;
@@ -667,7 +678,7 @@ var attachStyles = (hostRef) => {
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((BUILD7.shadowDom || BUILD7.scoped) && BUILD7.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
+  if ((BUILD7.shadowDom || BUILD7.scoped) && BUILD7.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
     if (BUILD7.scoped && flags & 2 /* scopedCssEncapsulation */) {
@@ -677,7 +688,6 @@ var attachStyles = (hostRef) => {
   endAttachStyles();
 };
 var getScopeId = (cmp, mode) => "sc-" + (BUILD7.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
-var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
 
 // src/runtime/vdom/vdom-render.ts
 import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
@@ -873,7 +883,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     if (BUILD10.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
-    if ((BUILD10.shadowDom || BUILD10.scoped) && isDef(scopeId) && elm["s-si"] !== scopeId) {
+    const rootNode = elm.getRootNode();
+    const isElementWithinShadowRoot = !rootNode.querySelector("body");
+    if (!isElementWithinShadowRoot && BUILD10.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
     if (BUILD10.scoped) {
@@ -1087,6 +1099,15 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
     if (BUILD10.slotRelocation && leftVNode.$tag$ === "slot") {
+      if (
+        // The component gets hydrated and no VDOM has been initialized.
+        // Here the comparison can't happen as $name$ property is not set for `leftNode`.
+        "$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
+        // hydration comments to be removed
+        leftVNode.$elm$.nodeType !== 8
+      ) {
+        return false;
+      }
       return leftVNode.$name$ === rightVNode.$name$;
     }
     if (BUILD10.vdomKey && !isInitialRender) {
@@ -1128,7 +1149,10 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
         elm.textContent = "";
       }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
-    } else if (BUILD10.updatable && oldChildren !== null) {
+    } else if (
+      // don't do this on initial render as it can cause non-hydrated content to be removed
+      !isInitialRender && BUILD10.updatable && oldChildren !== null
+    ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
     if (BUILD10.svg && isSvgMode && tag === "svg") {
@@ -1820,7 +1844,8 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
           if (this.hasOwnProperty(propName)) {
             newValue = this[propName];
             delete this[propName];
-          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) {
+          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
+          this[propName] == newValue) {
             return;
           } else if (propName == null) {
             const hostRef = getHostRef(this);
@@ -1927,7 +1952,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
         if (!BUILD14.hydrateServerSide && BUILD14.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         BUILD14.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-          style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2, false));
+          style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2));
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
         endRegisterStyles();
@@ -2496,10 +2521,8 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
   const dataStyles = /* @__PURE__ */ doc.createElement("style");
   const deferredConnectedCallbacks = [];
-  const styles2 = /* @__PURE__ */ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
   let appLoadFallback;
   let isBootstrapping = true;
-  let i2 = 0;
   Object.assign(plt, options);
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", doc.baseURI).href;
   if (BUILD19.asyncQueue) {
@@ -2510,11 +2533,6 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   if (BUILD19.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
-  if (BUILD19.hydrateClientSide && BUILD19.shadowDom) {
-    for (; i2 < styles2.length; i2++) {
-      registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
-    }
-  }
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
@@ -2881,7 +2899,7 @@ var globalScripts = (
 
 // src/hydrate/platform/proxy-host-element.ts
 import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
-function proxyHostElement(elm, cmpMeta, opts) {
+function proxyHostElement(elm, cmpMeta) {
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady;
   }
@@ -2894,10 +2912,8 @@ function proxyHostElement(elm, cmpMeta, opts) {
         mode: "open",
         delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
       });
-    } else if (opts.serializeShadowRoot) {
-      elm.attachShadow({ mode: "open" });
     } else {
-      elm.shadowRoot = elm;
+      elm.attachShadow({ mode: "open" });
     }
   }
   if (cmpMeta.$members$ != null) {
@@ -3010,7 +3026,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
             createdElements.add(elm);
             elm.connectedCallback = patchedConnectedCallback2;
             registerHost(elm, Cstr.cmpMeta);
-            proxyHostElement(elm, Cstr.cmpMeta, opts);
+            proxyHostElement(elm, Cstr.cmpMeta);
           }
         }
       }

package/internal/hydrate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/hydrate",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Stencil internal hydrate platform to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "private": true

package/internal/hydrate/runner.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Runner v4.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.20.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -10414,7 +10414,7 @@ function normalizeSerializationOptions(opts = {}) {
     removeAttributeQuotes: typeof opts.removeAttributeQuotes !== "boolean" ? false : opts.removeAttributeQuotes,
     removeBooleanAttributeQuotes: typeof opts.removeBooleanAttributeQuotes !== "boolean" ? false : opts.removeBooleanAttributeQuotes,
     removeHtmlComments: typeof opts.removeHtmlComments !== "boolean" ? false : opts.removeHtmlComments,
-    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? false : opts.serializeShadowRoot,
+    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? true : opts.serializeShadowRoot,
     fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
   };
 }
@@ -10540,7 +10540,7 @@ style="${cssText}">`;
     }
     if (EMPTY_ELEMENTS.has(tagName) === false) {
       const shadowRoot = node.shadowRoot;
-      if (opts.serializeShadowRoot && shadowRoot != null) {
+      if (shadowRoot != null && opts.serializeShadowRoot) {
         output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
         yield* streamToHtml(shadowRoot, opts, output);
         output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);
@@ -14884,7 +14884,7 @@ var removeUnusedStyleText = (usedSelectors, diagnostics, styleElm) => {
 
 // src/hydrate/runner/inspect-element.ts
 function inspectElement(results, elm, depth) {
-  const children = elm.children;
+  const children = [...Array.from(elm.children), ...Array.from(elm.shadowRoot ? elm.shadowRoot.children : [])];
   for (let i = 0, ii = children.length; i < ii; i++) {
     const childElm = children[i];
     const tagName = childElm.nodeName.toLowerCase();
@@ -15279,7 +15279,7 @@ function renderToString(html, options, asStream) {
   const opts = normalizeHydrateOptions(options);
   opts.serializeToHtml = true;
   opts.fullDocument = typeof opts.fullDocument === "boolean" ? opts.fullDocument : true;
-  opts.serializeShadowRoot = Boolean(opts.serializeShadowRoot);
+  opts.serializeShadowRoot = typeof opts.serializeShadowRoot === "boolean" ? opts.serializeShadowRoot : true;
   opts.constrainTimeouts = false;
   return hydrateDocument(html, opts, asStream);
 }
@@ -15336,7 +15336,7 @@ async function render(win, opts, results) {
     });
   }
   initializeWindow(win, win.document, opts, results);
-  const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate(win.document) : NOOP;
+  const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate : NOOP;
   try {
     await Promise.resolve(beforeHydrateFn(win.document));
     return new Promise((resolve) => hydrateFactory(win, opts, results, afterHydrate, resolve));
@@ -15353,7 +15353,7 @@ function renderStream(win, opts, results) {
   return Readable.from(processRender());
 }
 async function afterHydrate(win, opts, results, resolve) {
-  const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate(win.document) : NOOP;
+  const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate : NOOP;
   try {
     await Promise.resolve(afterHydrateFn(win.document));
     return resolve(finalizeHydrate(win, win.document, opts, results));

package/internal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Stencil internals only to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "types": "./index.d.ts",

package/internal/stencil-private.d.ts

@@ -1690,7 +1690,6 @@ export interface TransformCssToEsmInput {
      * is not shared by multiple fields, nor is it a composite of multiple modes).
      */
     mode?: string;
-    commentOriginalSelector?: boolean;
     sourceMap?: boolean;
     minify?: boolean;
     docs?: boolean;

package/internal/stencil-public-compiler.d.ts

@@ -382,6 +382,7 @@ export interface Config extends StencilConfig {
     suppressLogs?: boolean;
     profile?: boolean;
     tsCompilerOptions?: any;
+    tsWatchOptions?: any;
     _isValidated?: boolean;
     _isTesting?: boolean;
 }
@@ -1612,6 +1613,8 @@ export interface Testing {
     run(opts: TestingRunOptions): Promise<boolean>;
     destroy(): Promise<void>;
 }
+export declare type Path = string;
+export declare type TransformerConfig = [string, Record<string, unknown>];
 /**
  * Options for initiating a run of Stencil tests (spec and/or end-to-end)
  */
@@ -1643,7 +1646,7 @@ export interface JestConfig {
      * By default, Jest runs all tests and produces all errors into the console upon completion.
      * The bail config option can be used here to have Jest stop running tests after the first failure. Default: false
      */
-    bail?: boolean;
+    bail?: boolean | number;
     /**
      * The directory where Jest should store its cached dependency information. Jest attempts to scan your dependency tree once (up-front)
      * and cache it in order to ease some of the filesystem raking that needs to happen while running tests. This config option lets you
@@ -1717,8 +1720,8 @@ export interface JestConfig {
     reporters?: any;
     resetMocks?: boolean;
     resetModules?: boolean;
-    resolver?: string;
-    restoreMocks?: string;
+    resolver?: Path | null;
+    restoreMocks?: boolean;
     rootDir?: string;
     roots?: any[];
     runner?: string;
@@ -1735,13 +1738,13 @@ export interface JestConfig {
     testMatch?: string[];
     testPathIgnorePatterns?: string[];
     testPreset?: string;
-    testRegex?: string;
+    testRegex?: string[];
     testResultsProcessor?: string;
     testRunner?: string;
     testURL?: string;
     timers?: string;
     transform?: {
-        [key: string]: string;
+        [regex: string]: Path | TransformerConfig;
     };
     transformIgnorePatterns?: any[];
     unmockedModulePathPatterns?: any[];

package/internal/testing/index.js

@@ -784,17 +784,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         }
       }
     }
-    for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
-      clientHydrate(
-        parentVNode,
-        childRenderNodes,
-        slotNodes,
-        shadowRootNodes,
-        hostElm,
-        node.childNodes[i2],
-        hostId
-      );
-    }
     if (node.shadowRoot) {
       for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
         clientHydrate(
@@ -808,6 +797,17 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         );
       }
     }
+    for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
+      clientHydrate(
+        parentVNode,
+        childRenderNodes,
+        slotNodes,
+        shadowRootNodes,
+        hostElm,
+        node.childNodes[i2],
+        hostId
+      );
+    }
   } else if (node.nodeType === 8 /* CommentNode */) {
     childIdSplt = node.nodeValue.split(".");
     if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
@@ -885,14 +885,14 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
 var initializeDocumentHydrate = (node, orgLocNodes) => {
   if (node.nodeType === 1 /* ElementNode */) {
     let i2 = 0;
-    for (; i2 < node.childNodes.length; i2++) {
-      initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
-    }
     if (node.shadowRoot) {
-      for (i2 = 0; i2 < node.shadowRoot.childNodes.length; i2++) {
+      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
         initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
       }
     }
+    for (i2 = 0; i2 < node.childNodes.length; i2++) {
+      initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
+    }
   } else if (node.nodeType === 8 /* CommentNode */) {
     const childIdSplt = node.nodeValue.split(".");
     if (childIdSplt[0] === ORG_LOCATION_ID) {
@@ -1011,10 +1011,21 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          if (import_app_data7.BUILD.hydrateServerSide || import_app_data7.BUILD.hotModuleReplacement) {
+          if ((import_app_data7.BUILD.hydrateServerSide || import_app_data7.BUILD.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
           }
-          styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
+          const injectStyle = (
+            /**
+             * we render a scoped component
+             */
+            !(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) || /**
+             * we are using shadow dom and render the style tag within the shadowRoot
+             */
+            cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD"
+          );
+          if (injectStyle) {
+            styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
+          }
         }
         if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
           styleElm.innerHTML += SLOT_FB_CSS;
@@ -1039,7 +1050,7 @@ var attachStyles = (hostRef) => {
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((import_app_data7.BUILD.shadowDom || import_app_data7.BUILD.scoped) && import_app_data7.BUILD.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
+  if ((import_app_data7.BUILD.shadowDom || import_app_data7.BUILD.scoped) && import_app_data7.BUILD.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
     if (import_app_data7.BUILD.scoped && flags & 2 /* scopedCssEncapsulation */) {
@@ -1049,7 +1060,6 @@ var attachStyles = (hostRef) => {
   endAttachStyles();
 };
 var getScopeId = (cmp, mode) => "sc-" + (import_app_data7.BUILD.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
-var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
 
 // src/runtime/vdom/vdom-render.ts
 var import_app_data10 = require("@stencil/core/internal/app-data");
@@ -1245,7 +1255,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     if (import_app_data10.BUILD.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
-    if ((import_app_data10.BUILD.shadowDom || import_app_data10.BUILD.scoped) && isDef(scopeId) && elm["s-si"] !== scopeId) {
+    const rootNode = elm.getRootNode();
+    const isElementWithinShadowRoot = !rootNode.querySelector("body");
+    if (!isElementWithinShadowRoot && import_app_data10.BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
     if (import_app_data10.BUILD.scoped) {
@@ -1459,6 +1471,15 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
     if (import_app_data10.BUILD.slotRelocation && leftVNode.$tag$ === "slot") {
+      if (
+        // The component gets hydrated and no VDOM has been initialized.
+        // Here the comparison can't happen as $name$ property is not set for `leftNode`.
+        "$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
+        // hydration comments to be removed
+        leftVNode.$elm$.nodeType !== 8
+      ) {
+        return false;
+      }
       return leftVNode.$name$ === rightVNode.$name$;
     }
     if (import_app_data10.BUILD.vdomKey && !isInitialRender) {
@@ -1500,7 +1521,10 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
         elm.textContent = "";
       }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
-    } else if (import_app_data10.BUILD.updatable && oldChildren !== null) {
+    } else if (
+      // don't do this on initial render as it can cause non-hydrated content to be removed
+      !isInitialRender && import_app_data10.BUILD.updatable && oldChildren !== null
+    ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
     if (import_app_data10.BUILD.svg && isSvgMode && tag === "svg") {
@@ -2192,7 +2216,8 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
           if (this.hasOwnProperty(propName)) {
             newValue = this[propName];
             delete this[propName];
-          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) {
+          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
+          this[propName] == newValue) {
             return;
           } else if (propName == null) {
             const hostRef = getHostRef(this);
@@ -2299,7 +2324,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
         if (!import_app_data14.BUILD.hydrateServerSide && import_app_data14.BUILD.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         import_app_data14.BUILD.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-          style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2, false));
+          style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2));
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
         endRegisterStyles();
@@ -2868,10 +2893,8 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
   const dataStyles = /* @__PURE__ */ doc.createElement("style");
   const deferredConnectedCallbacks = [];
-  const styles2 = /* @__PURE__ */ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
   let appLoadFallback;
   let isBootstrapping = true;
-  let i2 = 0;
   Object.assign(plt, options);
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", doc.baseURI).href;
   if (import_app_data19.BUILD.asyncQueue) {
@@ -2882,11 +2905,6 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   if (import_app_data19.BUILD.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
-  if (import_app_data19.BUILD.hydrateClientSide && import_app_data19.BUILD.shadowDom) {
-    for (; i2 < styles2.length; i2++) {
-      registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
-    }
-  }
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {

package/internal/testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/testing",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Stencil internal testing platform to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "private": true

package/mock-doc/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc (CommonJS) v4.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc (CommonJS) v4.20.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __defProp = Object.defineProperty;
@@ -6287,7 +6287,7 @@ function normalizeSerializationOptions(opts = {}) {
     removeAttributeQuotes: typeof opts.removeAttributeQuotes !== "boolean" ? false : opts.removeAttributeQuotes,
     removeBooleanAttributeQuotes: typeof opts.removeBooleanAttributeQuotes !== "boolean" ? false : opts.removeBooleanAttributeQuotes,
     removeHtmlComments: typeof opts.removeHtmlComments !== "boolean" ? false : opts.removeHtmlComments,
-    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? false : opts.serializeShadowRoot,
+    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? true : opts.serializeShadowRoot,
     fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
   };
 }
@@ -6413,7 +6413,7 @@ style="${cssText}">`;
     }
     if (EMPTY_ELEMENTS.has(tagName) === false) {
       const shadowRoot = node.shadowRoot;
-      if (opts.serializeShadowRoot && shadowRoot != null) {
+      if (shadowRoot != null && opts.serializeShadowRoot) {
         output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
         yield* streamToHtml(shadowRoot, opts, output);
         output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);

package/mock-doc/index.d.ts

@@ -975,7 +975,7 @@ declare class MockWindow {
     addEventListener: (_type: string, _handler: (ev?: any) => void) => void;
     removeEventListener: (_type: string, _handler: (ev?: any) => void) => void;
     dispatchEvent: (_ev: any) => void;
-    onchange: (this: MediaQueryList, ev: MediaQueryListEvent) => any;
+    onchange: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
   };
   get Node(): any;
   get NodeList(): any;

package/mock-doc/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc v4.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.20.0 | MIT Licensed | https://stenciljs.com
  */
 
 // src/runtime/runtime-constants.ts
@@ -6234,7 +6234,7 @@ function normalizeSerializationOptions(opts = {}) {
     removeAttributeQuotes: typeof opts.removeAttributeQuotes !== "boolean" ? false : opts.removeAttributeQuotes,
     removeBooleanAttributeQuotes: typeof opts.removeBooleanAttributeQuotes !== "boolean" ? false : opts.removeBooleanAttributeQuotes,
     removeHtmlComments: typeof opts.removeHtmlComments !== "boolean" ? false : opts.removeHtmlComments,
-    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? false : opts.serializeShadowRoot,
+    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? true : opts.serializeShadowRoot,
     fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
   };
 }
@@ -6360,7 +6360,7 @@ style="${cssText}">`;
     }
     if (EMPTY_ELEMENTS.has(tagName) === false) {
       const shadowRoot = node.shadowRoot;
-      if (opts.serializeShadowRoot && shadowRoot != null) {
+      if (shadowRoot != null && opts.serializeShadowRoot) {
         output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
         yield* streamToHtml(shadowRoot, opts, output);
         output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);

package/mock-doc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/mock-doc",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Mock window, document and DOM outside of a browser environment.",
   "main": "./index.cjs",
   "module": "./index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "license": "MIT",
   "main": "./internal/stencil-core/index.cjs",
   "module": "./internal/stencil-core/index.js",
@@ -66,6 +66,10 @@
       "import": "./compiler/*",
       "types": "./compiler/*"
     },
+    "./screenshot": {
+      "require": "./screenshot/index.js",
+      "types": "./screenshot/index.d.ts"
+    },
     "./sys/node": {
       "import": "./sys/node/index.js",
       "require": "./sys/node/index.js",
@@ -80,6 +84,9 @@
       "types": "./testing/index.d.ts",
       "require": "./testing/index.js"
     },
+    "./testing/jest-preset": {
+      "require": "./testing/jest-preset.js"
+    },
     "./testing/*": {
       "import": "./testing/*",
       "require": "./testing/*"
@@ -154,7 +161,7 @@
     "eslint-plugin-jsdoc": "^48.0.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-wdio": "^8.24.12",
-    "execa": "8.0.1",
+    "execa": "9.3.0",
     "exit": "^0.1.2",
     "fs-extra": "^11.0.0",
     "glob": "10.4.1",
@@ -181,7 +188,7 @@
     "semver": "^7.3.7",
     "terser": "5.31.1",
     "tsx": "^4.10.3",
-    "typescript": "~5.4.0",
+    "typescript": "~5.5.3",
     "webpack": "^5.75.0",
     "ws": "8.17.1"
   },

package/screenshot/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Screenshot v4.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Screenshot v4.20.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __create = Object.create;