@stencil/core 4.18.0 → 4.18.1-dev.1715749302.3cfbb8d

package/internal/app-data/index.cjs

@@ -91,6 +91,7 @@ var BUILD = {
   cloneNodeFix: false,
   hydratedAttribute: false,
   hydratedClass: true,
+  // TODO(STENCIL-1305): remove this option
   scriptDataOpts: false,
   // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior
   scopedSlotTextContentFix: false,

package/internal/app-data/index.js

@@ -65,6 +65,7 @@ var BUILD = {
   cloneNodeFix: false,
   hydratedAttribute: false,
   hydratedClass: true,
+  // TODO(STENCIL-1305): remove this option
   scriptDataOpts: false,
   // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior
   scopedSlotTextContentFix: false,

package/internal/app-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/app-data",
-  "version": "4.18.0",
+  "version": "4.18.1-dev.1715749302.3cfbb8d",
   "description": "Used for default app data and build conditionals within builds.",
   "main": "./index.cjs",
   "module": "./index.js",

package/internal/client/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Platform v4.18.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.18.1-dev.1715749302.3cfbb8d | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -833,7 +833,7 @@ var checkSlotFallbackVisibility = false;
 var checkSlotRelocate = false;
 var isSvgMode = false;
 var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
-  var _a, _b, _c, _d;
+  var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
   let elm;
@@ -885,13 +885,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     if ((BUILD11.shadowDom || BUILD11.scoped) && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
-    if (BUILD11.scoped) {
-      const rootScopeId = ((_a = newParentVNode.$elm$) == null ? void 0 : _a["s-rsc"]) || ((_b = newParentVNode.$elm$) == null ? void 0 : _b["s-si"]) || ((_c = newParentVNode.$elm$) == null ? void 0 : _c["s-sc"]);
-      if (rootScopeId) {
-        elm["s-rsc"] = rootScopeId;
-        !elm.classList.contains(rootScopeId) && elm.classList.add(rootScopeId);
-      }
-    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2, elm);
@@ -914,7 +907,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       elm["s-sr"] = true;
       elm["s-cr"] = contentRef;
       elm["s-sn"] = newVNode2.$name$ || "";
-      elm["s-rf"] = (_d = newVNode2.$attrs$) == null ? void 0 : _d.ref;
+      elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
         if (BUILD11.experimentalSlotFixes) {
@@ -935,7 +928,7 @@ var relocateToHostRoot = (parentElm) => {
     const childNodeArray = Array.from(parentElm.childNodes);
     for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
       if (childNode["s-sh"] != null) {
-        host.insertBefore(childNode, contentRefNode != null ? contentRefNode : null);
+        insertBefore(host, childNode, contentRefNode != null ? contentRefNode : null);
         childNode["s-sh"] = void 0;
         checkSlotRelocate = true;
       }
@@ -957,7 +950,7 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
     const childNode = oldSlotChildNodes[i2];
     if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
-      parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+      insertBefore(parentReferenceNode(childNode), childNode, referenceNode(childNode));
       childNode["s-ol"].remove();
       childNode["s-ol"] = void 0;
       childNode["s-sh"] = void 0;
@@ -980,7 +973,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx, parentElm);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        containerElm.insertBefore(childNode, BUILD11.slotRelocation ? referenceNode(before) : before);
+        insertBefore(containerElm, childNode, BUILD11.slotRelocation ? referenceNode(before) : before);
       }
     }
   }
@@ -1040,7 +1033,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
-      parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
@@ -1048,7 +1041,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
-      parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
       oldEndVnode = oldCh[--oldEndIdx];
       newStartVnode = newCh[++newStartIdx];
     } else {
@@ -1077,9 +1070,9 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       }
       if (node) {
         if (BUILD11.slotRelocation) {
-          parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+          insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
         } else {
-          oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
+          insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
         }
       }
     }
@@ -1250,6 +1243,28 @@ var nullifyVNodeRefs = (vNode) => {
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
+var insertBefore = (parent, newNode, reference) => {
+  const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
+  if (BUILD11.scoped) {
+    setParentScopeIdAsClassName(newNode, parent);
+  }
+  return inserted;
+};
+var findParentScopeId = (element) => {
+  return element ? element["s-rsc"] || element["s-si"] || element["s-sc"] || findParentScopeId(element.parentElement) : void 0;
+};
+var setParentScopeIdAsClassName = (element, parent) => {
+  var _a, _b, _c;
+  if (element && parent) {
+    const oldRootScopeId = element["s-rsc"];
+    const newRootScopeId = findParentScopeId(parent);
+    oldRootScopeId && ((_a = element.classList) == null ? void 0 : _a.contains(oldRootScopeId)) && element.classList.remove(oldRootScopeId);
+    if (newRootScopeId) {
+      element["s-rsc"] = newRootScopeId;
+      !((_b = element.classList) == null ? void 0 : _b.contains(newRootScopeId)) && ((_c = element.classList) == null ? void 0 : _c.add(newRootScopeId));
+    }
+  }
+};
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   var _a, _b, _c, _d, _e;
   const hostElm = hostRef.$hostElement$;
@@ -1306,7 +1321,7 @@ render() {
         if (!nodeToRelocate["s-ol"]) {
           const orgLocationNode = BUILD11.isDebug || BUILD11.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
-          nodeToRelocate.parentNode.insertBefore(nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
+          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
       }
       for (const relocateData of relocateNodes) {
@@ -1337,7 +1352,7 @@ render() {
               if (!BUILD11.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
-              parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
+              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
               if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
                 nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
               }
@@ -1401,6 +1416,11 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
   const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  if (!instance) {
+    throw new Error(
+      `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
+    );
+  }
   let maybePromise;
   if (isInitialLoad) {
     if (BUILD12.lazyLoad && BUILD12.hostListener) {
@@ -1649,6 +1669,11 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
+  if (BUILD13.lazyLoad && !hostRef) {
+    throw new Error(
+      `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
+    );
+  }
   const elm = BUILD13.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
@@ -1971,7 +1996,7 @@ var setContentReference = (elm) => {
     BUILD16.isDebug ? `content-ref (host=${elm.localName})` : ""
   );
   contentRefElm["s-cn"] = true;
-  elm.insertBefore(contentRefElm, elm.firstChild);
+  insertBefore(elm, contentRefElm, elm.firstChild);
 };
 
 // src/runtime/disconnected-callback.ts
@@ -2040,7 +2065,8 @@ var patchCloneNode = (HostElementPrototype) => {
         "s-ol",
         "s-nr",
         "s-si",
-        "s-rf"
+        "s-rf",
+        "s-rsc"
       ];
       for (; i2 < srcNode.childNodes.length; i2++) {
         slotted = srcNode.childNodes[i2]["s-nr"];
@@ -2068,7 +2094,7 @@ var patchSlotAppendChild = (HostElementPrototype) => {
     if (slotNode) {
       const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
       const appendAfter = slotChildNodes[slotChildNodes.length - 1];
-      const insertedNode = appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+      const insertedNode = insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
       updateFallbackSlotVisibility(this);
       return insertedNode;
     }
@@ -2109,7 +2135,7 @@ var patchSlotPrepend = (HostElementPrototype) => {
         newChild["s-ol"] = slotPlaceholder;
         const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
         const appendAfter = slotChildNodes[0];
-        return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+        return insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
       }
       if (newChild.nodeType === 1 && !!newChild.getAttribute("slot")) {
         newChild.hidden = true;
@@ -2207,7 +2233,7 @@ var patchTextContent = (hostElementPrototype) => {
           if (node["s-sn"] === "") {
             const textNode = this.ownerDocument.createTextNode(value);
             textNode["s-sn"] = "";
-            node.parentElement.insertBefore(textNode, node.nextSibling);
+            insertBefore(node.parentElement, textNode, node.nextSibling);
           } else {
             node.remove();
           }
@@ -2238,7 +2264,7 @@ var patchTextContent = (hostElementPrototype) => {
           this.__textContent = value;
           const contentRefElm = this["s-cr"];
           if (contentRefElm) {
-            this.insertBefore(contentRefElm, this.firstChild);
+            insertBefore(this, contentRefElm, this.firstChild);
           }
         }
       }
@@ -2632,14 +2658,10 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (elm, flags) => {
-  if (BUILD21.hostListenerTargetDocument && flags & 4 /* TargetDocument */)
-    return doc;
-  if (BUILD21.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
-    return win;
-  if (BUILD21.hostListenerTargetBody && flags & 16 /* TargetBody */)
-    return doc.body;
-  if (BUILD21.hostListenerTargetParent && flags & 32 /* TargetParent */)
-    return elm.parentElement;
+  if (BUILD21.hostListenerTargetDocument && flags & 4 /* TargetDocument */) return doc;
+  if (BUILD21.hostListenerTargetWindow && flags & 8 /* TargetWindow */) return win;
+  if (BUILD21.hostListenerTargetBody && flags & 16 /* TargetBody */) return doc.body;
+  if (BUILD21.hostListenerTargetParent && flags & 32 /* TargetParent */) return elm.parentElement;
   return elm;
 };
 var hostListenerOpts = (flags) => supportsListenerOptions ? {
@@ -2664,7 +2686,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
     const orgLocationNodes = [];
     parseVNodeAnnotations(doc2, doc2.body, docData, orgLocationNodes);
     orgLocationNodes.forEach((orgLocationNode) => {
-      var _a, _b;
+      var _a;
       if (orgLocationNode != null && orgLocationNode["s-nr"]) {
         const nodeRef = orgLocationNode["s-nr"];
         let hostId = nodeRef["s-host-id"];
@@ -2687,7 +2709,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
             }
             const commentBeforeTextNode = doc2.createComment(childId);
             commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
-            (_b = nodeRef.parentNode) == null ? void 0 : _b.insertBefore(commentBeforeTextNode, nodeRef);
+            insertBefore(nodeRef.parentNode, commentBeforeTextNode, nodeRef);
           }
         }
         let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
@@ -2772,7 +2794,7 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
     if (nodeName !== "STYLE" && nodeName !== "SCRIPT") {
       const textNodeId = `${TEXT_NODE_ID}.${childId}`;
       const commentBeforeTextNode = doc2.createComment(textNodeId);
-      parentNode == null ? void 0 : parentNode.insertBefore(commentBeforeTextNode, childElm);
+      insertBefore(parentNode, commentBeforeTextNode, childElm);
     }
   } else if (childElm.nodeType === 8 /* CommentNode */) {
     if (childElm["s-sr"]) {

package/internal/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/client",
-  "version": "4.18.0",
+  "version": "4.18.1-dev.1715749302.3cfbb8d",
   "description": "Stencil internal client platform to be imported by the Stencil Compiler and internal runtime. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "private": true,

package/internal/client/patch-browser.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Browser v4.18.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.18.1-dev.1715749302.3cfbb8d | MIT Licensed | https://stenciljs.com
  */
 
 // src/client/client-patch-browser.ts

package/internal/client/shadow-css.js

@@ -136,8 +136,7 @@ var convertColonRule = (cssText, regExp, partReplacer) => {
       const r = [];
       for (let i = 0; i < parts.length; i++) {
         const p = parts[i].trim();
-        if (!p)
-          break;
+        if (!p) break;
         r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
       }
       return r.join(",");

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.18.0 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.18.1-dev.1715749302.3cfbb8d | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -822,7 +822,7 @@ var checkSlotFallbackVisibility = false;
 var checkSlotRelocate = false;
 var isSvgMode = false;
 var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
-  var _a, _b, _c, _d;
+  var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
   let elm;
@@ -874,13 +874,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     if ((BUILD10.shadowDom || BUILD10.scoped) && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
-    if (BUILD10.scoped) {
-      const rootScopeId = ((_a = newParentVNode.$elm$) == null ? void 0 : _a["s-rsc"]) || ((_b = newParentVNode.$elm$) == null ? void 0 : _b["s-si"]) || ((_c = newParentVNode.$elm$) == null ? void 0 : _c["s-sc"]);
-      if (rootScopeId) {
-        elm["s-rsc"] = rootScopeId;
-        !elm.classList.contains(rootScopeId) && elm.classList.add(rootScopeId);
-      }
-    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2, elm);
@@ -903,7 +896,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       elm["s-sr"] = true;
       elm["s-cr"] = contentRef;
       elm["s-sn"] = newVNode2.$name$ || "";
-      elm["s-rf"] = (_d = newVNode2.$attrs$) == null ? void 0 : _d.ref;
+      elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
         if (BUILD10.experimentalSlotFixes) {
@@ -924,7 +917,7 @@ var relocateToHostRoot = (parentElm) => {
     const childNodeArray = Array.from(parentElm.childNodes);
     for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
       if (childNode["s-sh"] != null) {
-        host.insertBefore(childNode, contentRefNode != null ? contentRefNode : null);
+        insertBefore(host, childNode, contentRefNode != null ? contentRefNode : null);
         childNode["s-sh"] = void 0;
         checkSlotRelocate = true;
       }
@@ -946,7 +939,7 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
     const childNode = oldSlotChildNodes[i2];
     if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
-      parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+      insertBefore(parentReferenceNode(childNode), childNode, referenceNode(childNode));
       childNode["s-ol"].remove();
       childNode["s-ol"] = void 0;
       childNode["s-sh"] = void 0;
@@ -969,7 +962,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx, parentElm);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        containerElm.insertBefore(childNode, BUILD10.slotRelocation ? referenceNode(before) : before);
+        insertBefore(containerElm, childNode, BUILD10.slotRelocation ? referenceNode(before) : before);
       }
     }
   }
@@ -1029,7 +1022,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
-      parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
@@ -1037,7 +1030,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
-      parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
       oldEndVnode = oldCh[--oldEndIdx];
       newStartVnode = newCh[++newStartIdx];
     } else {
@@ -1066,9 +1059,9 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       }
       if (node) {
         if (BUILD10.slotRelocation) {
-          parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+          insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
         } else {
-          oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
+          insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
         }
       }
     }
@@ -1239,6 +1232,28 @@ var nullifyVNodeRefs = (vNode) => {
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
+var insertBefore = (parent, newNode, reference) => {
+  const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
+  if (BUILD10.scoped) {
+    setParentScopeIdAsClassName(newNode, parent);
+  }
+  return inserted;
+};
+var findParentScopeId = (element) => {
+  return element ? element["s-rsc"] || element["s-si"] || element["s-sc"] || findParentScopeId(element.parentElement) : void 0;
+};
+var setParentScopeIdAsClassName = (element, parent) => {
+  var _a, _b, _c;
+  if (element && parent) {
+    const oldRootScopeId = element["s-rsc"];
+    const newRootScopeId = findParentScopeId(parent);
+    oldRootScopeId && ((_a = element.classList) == null ? void 0 : _a.contains(oldRootScopeId)) && element.classList.remove(oldRootScopeId);
+    if (newRootScopeId) {
+      element["s-rsc"] = newRootScopeId;
+      !((_b = element.classList) == null ? void 0 : _b.contains(newRootScopeId)) && ((_c = element.classList) == null ? void 0 : _c.add(newRootScopeId));
+    }
+  }
+};
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   var _a, _b, _c, _d, _e;
   const hostElm = hostRef.$hostElement$;
@@ -1295,7 +1310,7 @@ render() {
         if (!nodeToRelocate["s-ol"]) {
           const orgLocationNode = BUILD10.isDebug || BUILD10.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
-          nodeToRelocate.parentNode.insertBefore(nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
+          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
       }
       for (const relocateData of relocateNodes) {
@@ -1326,7 +1341,7 @@ render() {
               if (!BUILD10.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
-              parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
+              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
               if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
                 nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
               }
@@ -1390,6 +1405,11 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
   const instance = BUILD11.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  if (!instance) {
+    throw new Error(
+      `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
+    );
+  }
   let maybePromise;
   if (isInitialLoad) {
     if (BUILD11.lazyLoad && BUILD11.hostListener) {
@@ -1638,6 +1658,11 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
+  if (BUILD12.lazyLoad && !hostRef) {
+    throw new Error(
+      `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
+    );
+  }
   const elm = BUILD12.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
@@ -1960,7 +1985,7 @@ var setContentReference = (elm) => {
     BUILD15.isDebug ? `content-ref (host=${elm.localName})` : ""
   );
   contentRefElm["s-cn"] = true;
-  elm.insertBefore(contentRefElm, elm.firstChild);
+  insertBefore(elm, contentRefElm, elm.firstChild);
 };
 
 // src/runtime/disconnected-callback.ts
@@ -2029,7 +2054,8 @@ var patchCloneNode = (HostElementPrototype) => {
         "s-ol",
         "s-nr",
         "s-si",
-        "s-rf"
+        "s-rf",
+        "s-rsc"
       ];
       for (; i2 < srcNode.childNodes.length; i2++) {
         slotted = srcNode.childNodes[i2]["s-nr"];
@@ -2057,7 +2083,7 @@ var patchSlotAppendChild = (HostElementPrototype) => {
     if (slotNode) {
       const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
       const appendAfter = slotChildNodes[slotChildNodes.length - 1];
-      const insertedNode = appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+      const insertedNode = insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
       updateFallbackSlotVisibility(this);
       return insertedNode;
     }
@@ -2098,7 +2124,7 @@ var patchSlotPrepend = (HostElementPrototype) => {
         newChild["s-ol"] = slotPlaceholder;
         const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
         const appendAfter = slotChildNodes[0];
-        return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+        return insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
       }
       if (newChild.nodeType === 1 && !!newChild.getAttribute("slot")) {
         newChild.hidden = true;
@@ -2196,7 +2222,7 @@ var patchTextContent = (hostElementPrototype) => {
           if (node["s-sn"] === "") {
             const textNode = this.ownerDocument.createTextNode(value);
             textNode["s-sn"] = "";
-            node.parentElement.insertBefore(textNode, node.nextSibling);
+            insertBefore(node.parentElement, textNode, node.nextSibling);
           } else {
             node.remove();
           }
@@ -2227,7 +2253,7 @@ var patchTextContent = (hostElementPrototype) => {
           this.__textContent = value;
           const contentRefElm = this["s-cr"];
           if (contentRefElm) {
-            this.insertBefore(contentRefElm, this.firstChild);
+            insertBefore(this, contentRefElm, this.firstChild);
           }
         }
       }
@@ -2621,14 +2647,10 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (elm, flags) => {
-  if (BUILD20.hostListenerTargetDocument && flags & 4 /* TargetDocument */)
-    return doc;
-  if (BUILD20.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
-    return win;
-  if (BUILD20.hostListenerTargetBody && flags & 16 /* TargetBody */)
-    return doc.body;
-  if (BUILD20.hostListenerTargetParent && flags & 32 /* TargetParent */)
-    return elm.parentElement;
+  if (BUILD20.hostListenerTargetDocument && flags & 4 /* TargetDocument */) return doc;
+  if (BUILD20.hostListenerTargetWindow && flags & 8 /* TargetWindow */) return win;
+  if (BUILD20.hostListenerTargetBody && flags & 16 /* TargetBody */) return doc.body;
+  if (BUILD20.hostListenerTargetParent && flags & 32 /* TargetParent */) return elm.parentElement;
   return elm;
 };
 var hostListenerOpts = (flags) => supportsListenerOptions ? {
@@ -2650,7 +2672,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
     const orgLocationNodes = [];
     parseVNodeAnnotations(doc2, doc2.body, docData, orgLocationNodes);
     orgLocationNodes.forEach((orgLocationNode) => {
-      var _a, _b;
+      var _a;
       if (orgLocationNode != null && orgLocationNode["s-nr"]) {
         const nodeRef = orgLocationNode["s-nr"];
         let hostId = nodeRef["s-host-id"];
@@ -2673,7 +2695,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
             }
             const commentBeforeTextNode = doc2.createComment(childId);
             commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
-            (_b = nodeRef.parentNode) == null ? void 0 : _b.insertBefore(commentBeforeTextNode, nodeRef);
+            insertBefore(nodeRef.parentNode, commentBeforeTextNode, nodeRef);
           }
         }
         let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
@@ -2758,7 +2780,7 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
     if (nodeName !== "STYLE" && nodeName !== "SCRIPT") {
       const textNodeId = `${TEXT_NODE_ID}.${childId}`;
       const commentBeforeTextNode = doc2.createComment(textNodeId);
-      parentNode == null ? void 0 : parentNode.insertBefore(commentBeforeTextNode, childElm);
+      insertBefore(parentNode, commentBeforeTextNode, childElm);
     }
   } else if (childElm.nodeType === 8 /* CommentNode */) {
     if (childElm["s-sr"]) {

package/internal/hydrate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/hydrate",
-  "version": "4.18.0",
+  "version": "4.18.1-dev.1715749302.3cfbb8d",
   "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