@rindo/core 4.25.3 → 4.27.0

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Rindo Hydrate Platform v4.25.3 | MIT Licensed | https://rindojs.web.app
+ Rindo Hydrate Platform v4.27.0 | MIT Licensed | https://rindojs.web.app
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -64,6 +64,11 @@ function queryNonceMetaTagContent(doc2) {
   return (_c = (_b = (_a = doc2.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
 }
 
+// src/utils/regular-expression.ts
+var escapeRegExpSpecialCharacters = (text) => {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
 // src/utils/result.ts
 var result_exports = {};
 __export(result_exports, {
@@ -152,12 +157,11 @@ var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
 
 // src/runtime/slot-polyfill-utils.ts
 var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = elm.__childNodes || elm.childNodes;
+  const childNodes = internalCall(elm, "childNodes");
   if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
     getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
-      var _a;
       if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
-        if ((_a = getHostSlotChildNodes(slotNode, slotNode["s-sn"], false)) == null ? void 0 : _a.length) {
+        if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) {
           slotNode.hidden = true;
         } else {
           slotNode.hidden = false;
@@ -165,8 +169,10 @@ var updateFallbackSlotVisibility = (elm) => {
       }
     });
   }
-  for (const childNode of childNodes) {
-    if (childNode.nodeType === 1 /* ElementNode */ && (childNode.__childNodes || childNode.childNodes).length) {
+  let i2 = 0;
+  for (i2 = 0; i2 < childNodes.length; i2++) {
+    const childNode = childNodes[i2];
+    if (childNode.nodeType === 1 /* ElementNode */ && internalCall(childNode, "childNodes").length) {
       updateFallbackSlotVisibility(childNode);
     }
   }
@@ -187,7 +193,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
   let childNode;
   for (; i2 < childNodes.length; i2++) {
     childNode = childNodes[i2];
-    if (childNode["s-sr"] && childNode["s-hn"] === hostName && (slotName === void 0 || childNode["s-sn"] === slotName)) {
+    if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0 || getSlotName(childNode) === slotName)) {
       slottedNodes.push(childNode);
       if (typeof slotName !== "undefined") return slottedNodes;
     }
@@ -195,11 +201,12 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
   }
   return slottedNodes;
 }
-var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
+var getSlotChildSiblings = (slot, slotName, includeSlot = true) => {
   const childNodes = [];
-  if (includeSlot && node["s-sr"] || !node["s-sr"]) childNodes.push(node);
-  while ((node = node.nextSibling) && node["s-sn"] === slotName) {
-    childNodes.push(node);
+  if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot);
+  let node = slot;
+  while (node = node.nextSibling) {
+    if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) childNodes.push(node);
   }
   return childNodes;
 };
@@ -219,38 +226,73 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
   return slotName === "";
 };
 var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
-  let slottedNodeLocation;
   if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
-    slottedNodeLocation = newChild["s-ol"];
-  } else {
-    slottedNodeLocation = document.createTextNode("");
-    slottedNodeLocation["s-nr"] = newChild;
+    return;
   }
+  const slottedNodeLocation = document.createTextNode("");
+  slottedNodeLocation["s-nr"] = newChild;
   if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
   const parent = slotNode["s-cr"].parentNode;
-  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
-  if (typeof position !== "undefined") {
-    if (BUILD2.hydrateClientSide) {
-      slottedNodeLocation["s-oo"] = position;
-      const childNodes = parent.__childNodes || parent.childNodes;
-      const slotRelocateNodes = [slottedNodeLocation];
-      childNodes.forEach((n) => {
-        if (n["s-nr"]) slotRelocateNodes.push(n);
-      });
-      slotRelocateNodes.sort((a, b) => {
-        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
-        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
-        return 0;
-      });
-      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
-    }
+  const appendMethod = prepend ? internalCall(parent, "prepend") : internalCall(parent, "appendChild");
+  if (BUILD2.hydrateClientSide && typeof position !== "undefined") {
+    slottedNodeLocation["s-oo"] = position;
+    const childNodes = internalCall(parent, "childNodes");
+    const slotRelocateNodes = [slottedNodeLocation];
+    childNodes.forEach((n) => {
+      if (n["s-nr"]) slotRelocateNodes.push(n);
+    });
+    slotRelocateNodes.sort((a, b) => {
+      if (!a["s-oo"] || a["s-oo"] < (b["s-oo"] || 0)) return -1;
+      else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
+      return 0;
+    });
+    slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
   } else {
     appendMethod.call(parent, slottedNodeLocation);
   }
   newChild["s-ol"] = slottedNodeLocation;
   newChild["s-sh"] = slotNode["s-hn"];
 };
-var getSlotName = (node) => node["s-sn"] || node.nodeType === 1 && node.getAttribute("slot") || "";
+var getSlotName = (node) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0;
+function patchSlotNode(node) {
+  if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return;
+  const assignedFactory = (elementsOnly) => (function(opts) {
+    const toReturn = [];
+    const slotName = this["s-sn"];
+    if (opts == null ? void 0 : opts.flatten) {
+      console.error(`
+          Flattening is not supported for Rindo non-shadow slots. 
+          You can use \`.childNodes\` to nested slot fallback content.
+          If you have a particular use case, please open an issue on the Rindo repo.
+        `);
+    }
+    const parent = this["s-cr"].parentElement;
+    const slottedNodes = parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes);
+    slottedNodes.forEach((n) => {
+      if (slotName === getSlotName(n)) {
+        toReturn.push(n);
+      }
+    });
+    if (elementsOnly) {
+      return toReturn.filter((n) => n.nodeType === 1 /* ElementNode */);
+    }
+    return toReturn;
+  }).bind(node);
+  node.assignedElements = assignedFactory(true);
+  node.assignedNodes = assignedFactory(false);
+}
+function dispatchSlotChangeEvent(elm) {
+  elm.dispatchEvent(new CustomEvent("slotchange", { bubbles: false, cancelable: false, composed: false }));
+}
+function findSlotFromSlottedNode(slottedNode, parentHost) {
+  var _a;
+  parentHost = parentHost || ((_a = slottedNode["s-ol"]) == null ? void 0 : _a.parentElement);
+  if (!parentHost) return { slotNode: null, slotName: "" };
+  const slotName = slottedNode["s-sn"] = getSlotName(slottedNode) || "";
+  const childNodes = internalCall(parentHost, "childNodes");
+  const slotNode = getHostSlotNodes(childNodes, parentHost.tagName, slotName)[0];
+  return { slotNode, slotName };
+}
 
 // src/runtime/dom-extras.ts
 var patchPseudoShadowDom = (hostElementPrototype) => {
@@ -314,19 +356,14 @@ var patchCloneNode = (HostElementPrototype) => {
 var patchSlotAppendChild = (HostElementPrototype) => {
   HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
   HostElementPrototype.appendChild = function(newChild) {
-    const slotName = newChild["s-sn"] = getSlotName(newChild);
-    const slotNode = getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, slotName)[0];
+    const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
     if (slotNode) {
       addSlotRelocateNode(newChild, slotNode);
-      const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+      const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
       const appendAfter = slotChildNodes[slotChildNodes.length - 1];
-      const parent = intrnlCall(appendAfter, "parentNode");
-      let insertedNode;
-      if (parent.__insertBefore) {
-        insertedNode = parent.__insertBefore(newChild, appendAfter.nextSibling);
-      } else {
-        insertedNode = parent.insertBefore(newChild, appendAfter.nextSibling);
-      }
+      const parent = internalCall(appendAfter, "parentNode");
+      const insertedNode = internalCall(parent, "insertBefore")(newChild, appendAfter.nextSibling);
+      dispatchSlotChangeEvent(slotNode);
       updateFallbackSlotVisibility(this);
       return insertedNode;
     }
@@ -355,19 +392,17 @@ var patchSlotPrepend = (HostElementPrototype) => {
       if (typeof newChild === "string") {
         newChild = this.ownerDocument.createTextNode(newChild);
       }
-      const slotName = newChild["s-sn"] = getSlotName(newChild);
-      const childNodes = this.__childNodes || this.childNodes;
+      const slotName = (newChild["s-sn"] = getSlotName(newChild)) || "";
+      const childNodes = internalCall(this, "childNodes");
       const slotNode = getHostSlotNodes(childNodes, this.tagName, slotName)[0];
       if (slotNode) {
         addSlotRelocateNode(newChild, slotNode, true);
-        const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+        const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
         const appendAfter = slotChildNodes[0];
-        const parent = intrnlCall(appendAfter, "parentNode");
-        if (parent.__insertBefore) {
-          return parent.__insertBefore(newChild, intrnlCall(appendAfter, "nextSibling"));
-        } else {
-          return parent.insertBefore(newChild, intrnlCall(appendAfter, "nextSibling"));
-        }
+        const parent = internalCall(appendAfter, "parentNode");
+        const toReturn = internalCall(parent, "insertBefore")(newChild, internalCall(appendAfter, "nextSibling"));
+        dispatchSlotChangeEvent(slotNode);
+        return toReturn;
       }
       if (newChild.nodeType === 1 && !!newChild.getAttribute("slot")) {
         newChild.hidden = true;
@@ -417,8 +452,7 @@ var patchInsertBefore = (HostElementPrototype) => {
   if (eleProto.__insertBefore) return;
   eleProto.__insertBefore = HostElementPrototype.insertBefore;
   HostElementPrototype.insertBefore = function(newChild, currentChild) {
-    const slotName = newChild["s-sn"] = getSlotName(newChild);
-    const slotNode = getHostSlotNodes(this.__childNodes, this.tagName, slotName)[0];
+    const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
     const slottedNodes = this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes);
     if (slotNode) {
       let found = false;
@@ -431,18 +465,19 @@ var patchInsertBefore = (HostElementPrototype) => {
           }
           if (slotName === currentChild["s-sn"]) {
             addSlotRelocateNode(newChild, slotNode);
-            const parent = intrnlCall(currentChild, "parentNode");
-            if (parent.__insertBefore) {
-              parent.__insertBefore(newChild, currentChild);
-            } else {
-              parent.insertBefore(newChild, currentChild);
-            }
+            const parent = internalCall(currentChild, "parentNode");
+            internalCall(parent, "insertBefore")(newChild, currentChild);
+            dispatchSlotChangeEvent(slotNode);
           }
           return;
         }
       });
       if (found) return newChild;
     }
+    const parentNode = currentChild == null ? void 0 : currentChild.__parentNode;
+    if (parentNode && !this.isSameNode(parentNode)) {
+      return this.appendChild(newChild);
+    }
     return this.__insertBefore(newChild, currentChild);
   };
 };
@@ -520,7 +555,7 @@ var patchChildSlotNodes = (elm) => {
   });
 };
 var patchSlottedNode = (node) => {
-  if (!node || node.__nextSibling || !globalThis.Node) return;
+  if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
   patchNextSibling(node);
   patchPreviousSibling(node);
   patchParentNode(node);
@@ -624,11 +659,14 @@ function patchHostOriginalAccessor(accessorName, node) {
   }
   if (accessor) Object.defineProperty(node, "__" + accessorName, accessor);
 }
-function intrnlCall(node, method) {
+function internalCall(node, method) {
   if ("__" + method in node) {
-    return node["__" + method];
+    const toReturn = node["__" + method];
+    if (typeof toReturn !== "function") return toReturn;
+    return toReturn.bind(node);
   } else {
-    return node[method];
+    if (typeof node[method] !== "function") return node[method];
+    return node[method].bind(node);
   }
 }
 
@@ -878,7 +916,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       delete hostElm["s-sc"];
     }
   }
-  if (!plt.$orgLocNodes$) {
+  if (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size) {
     initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
   hostElm[HYDRATE_ID] = hostId;
@@ -972,13 +1010,25 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (BUILD6.shadowDom && shadowRoot) {
+  if (BUILD6.shadowDom && shadowRoot && !shadowRoot.childNodes.length) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
-    for (rnIdex; rnIdex < rnLen; rnIdex++) {
-      shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+    if (rnLen) {
+      for (rnIdex; rnIdex < rnLen; rnIdex++) {
+        shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+      }
+      Array.from(hostElm.childNodes).forEach((node) => {
+        if (typeof node["s-sn"] !== "string") {
+          if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
+            node.removeAttribute("hidden");
+          } else if (node.nodeType === 8 /* CommentNode */ || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+            node.parentNode.removeChild(node);
+          }
+        }
+      });
     }
   }
+  plt.$orgLocNodes$.delete(hostElm["s-id"]);
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -1089,7 +1139,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         $text$: null
       });
       if (childNodeType === TEXT_NODE_ID) {
-        childVNode.$elm$ = node.nextSibling;
+        childVNode.$elm$ = findCorrespondingNode(node, 3 /* TextNode */);
         if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
           childVNode.$text$ = childVNode.$elm$.textContent;
           childRenderNodes.push(childVNode);
@@ -1105,7 +1155,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           }
         }
       } else if (childNodeType === COMMENT_NODE_ID) {
-        childVNode.$elm$ = node.nextSibling;
+        childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
         if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* CommentNode */) {
           childRenderNodes.push(childVNode);
           node.remove();
@@ -1139,6 +1189,10 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
     vnode.$elm$ = node;
     vnode.$index$ = "0";
     parentVNode.$children$ = [vnode];
+  } else {
+    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+      node.remove();
+    }
   }
   return parentVNode;
 };
@@ -1208,6 +1262,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
     const slot = childVNode.$elm$;
     const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
     addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
+    patchSlotNode(node);
     if (shouldMove) {
       parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
     }
@@ -1228,10 +1283,367 @@ var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) =>
     slottedNode = slottedNode.nextSibling;
   }
 };
+var findCorrespondingNode = (node, type) => {
+  let sibling = node;
+  do {
+    sibling = sibling.nextSibling;
+  } while (sibling && (sibling.nodeType !== type || !sibling.nodeValue));
+  return sibling;
+};
 
 // src/runtime/initialize-component.ts
 import { BUILD as BUILD17 } from "@rindo/core/internal/app-data";
 
+// src/utils/shadow-css.ts
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ *
+ * This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+ */
+var safeSelector = (selector) => {
+  const placeholders = [];
+  let index = 0;
+  selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+    const replaceBy = `__ph-${index}__`;
+    placeholders.push(keep);
+    index++;
+    return replaceBy;
+  });
+  const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+    const replaceBy = `__ph-${index}__`;
+    placeholders.push(exp);
+    index++;
+    return pseudo + replaceBy;
+  });
+  const ss = {
+    content,
+    placeholders
+  };
+  return ss;
+};
+var restoreSafeSelector = (placeholders, content) => {
+  return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
+};
+var _polyfillHost = "-shadowcsshost";
+var _polyfillSlotted = "-shadowcssslotted";
+var _polyfillHostContext = "-shadowcsscontext";
+var _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
+var _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
+var _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
+var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
+var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
+var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+var _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
+var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
+var _polyfillHostRe = /-shadowcsshost/gim;
+var createSupportsRuleRe = (selector) => new RegExp(`((?<!(^@supports(.*)))|(?<={.*))(${selector}\\b)`, "gim");
+var _colonSlottedRe = createSupportsRuleRe("::slotted");
+var _colonHostRe = createSupportsRuleRe(":host");
+var _colonHostContextRe = createSupportsRuleRe(":host-context");
+var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+var stripComments = (input) => {
+  return input.replace(_commentRe, "");
+};
+var _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+var extractCommentsWithHash = (input) => {
+  return input.match(_commentWithHashRe) || [];
+};
+var _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+var _curlyRe = /([{}])/g;
+var _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
+var OPEN_CURLY = "{";
+var CLOSE_CURLY = "}";
+var BLOCK_PLACEHOLDER = "%BLOCK%";
+var processRules = (input, ruleCallback) => {
+  const inputWithEscapedBlocks = escapeBlocks(input);
+  let nextBlockIndex = 0;
+  return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
+    const selector = m[2];
+    let content = "";
+    let suffix = m[4];
+    let contentPrefix = "";
+    if (suffix && suffix.startsWith("{" + BLOCK_PLACEHOLDER)) {
+      content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+      suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
+      contentPrefix = "{";
+    }
+    const cssRule = {
+      selector,
+      content
+    };
+    const rule = ruleCallback(cssRule);
+    return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+  });
+};
+var escapeBlocks = (input) => {
+  const inputParts = input.split(_curlyRe);
+  const resultParts = [];
+  const escapedBlocks = [];
+  let bracketCount = 0;
+  let currentBlockParts = [];
+  for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+    const part = inputParts[partIndex];
+    if (part === CLOSE_CURLY) {
+      bracketCount--;
+    }
+    if (bracketCount > 0) {
+      currentBlockParts.push(part);
+    } else {
+      if (currentBlockParts.length > 0) {
+        escapedBlocks.push(currentBlockParts.join(""));
+        resultParts.push(BLOCK_PLACEHOLDER);
+        currentBlockParts = [];
+      }
+      resultParts.push(part);
+    }
+    if (part === OPEN_CURLY) {
+      bracketCount++;
+    }
+  }
+  if (currentBlockParts.length > 0) {
+    escapedBlocks.push(currentBlockParts.join(""));
+    resultParts.push(BLOCK_PLACEHOLDER);
+  }
+  const strEscapedBlocks = {
+    escapedString: resultParts.join(""),
+    blocks: escapedBlocks
+  };
+  return strEscapedBlocks;
+};
+var insertPolyfillHostInCssText = (cssText) => {
+  cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
+  return cssText;
+};
+var convertColonRule = (cssText, regExp, partReplacer) => {
+  return cssText.replace(regExp, (...m) => {
+    if (m[2]) {
+      const parts = m[2].split(",");
+      const r = [];
+      for (let i2 = 0; i2 < parts.length; i2++) {
+        const p = parts[i2].trim();
+        if (!p) break;
+        r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+      }
+      return r.join(",");
+    } else {
+      return _polyfillHostNoCombinator + m[3];
+    }
+  });
+};
+var colonHostPartReplacer = (host, part, suffix) => {
+  return host + part.replace(_polyfillHost, "") + suffix;
+};
+var convertColonHost = (cssText) => {
+  return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
+};
+var colonHostContextPartReplacer = (host, part, suffix) => {
+  if (part.indexOf(_polyfillHost) > -1) {
+    return colonHostPartReplacer(host, part, suffix);
+  } else {
+    return host + part + suffix + ", " + part + " " + host + suffix;
+  }
+};
+var convertColonSlotted = (cssText, slotScopeId) => {
+  const slotClass = "." + slotScopeId + " > ";
+  const selectors = [];
+  cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
+    if (m[2]) {
+      const compound = m[2].trim();
+      const suffix = m[3];
+      const slottedSelector = slotClass + compound + suffix;
+      let prefixSelector = "";
+      for (let i2 = m[4] - 1; i2 >= 0; i2--) {
+        const char = m[5][i2];
+        if (char === "}" || char === ",") {
+          break;
+        }
+        prefixSelector = char + prefixSelector;
+      }
+      const orgSelector = (prefixSelector + slottedSelector).trim();
+      const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
+      if (orgSelector !== addedSelector) {
+        const updatedSelector = `${addedSelector}, ${orgSelector}`;
+        selectors.push({
+          orgSelector,
+          updatedSelector
+        });
+      }
+      return slottedSelector;
+    } else {
+      return _polyfillHostNoCombinator + m[3];
+    }
+  });
+  return {
+    selectors,
+    cssText
+  };
+};
+var convertColonHostContext = (cssText) => {
+  return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
+};
+var convertShadowDOMSelectors = (cssText) => {
+  return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
+};
+var makeScopeMatcher = (scopeSelector2) => {
+  const lre = /\[/g;
+  const rre = /\]/g;
+  scopeSelector2 = scopeSelector2.replace(lre, "\\[").replace(rre, "\\]");
+  return new RegExp("^(" + scopeSelector2 + ")" + _selectorReSuffix, "m");
+};
+var selectorNeedsScoping = (selector, scopeSelector2) => {
+  const re = makeScopeMatcher(scopeSelector2);
+  return !re.test(selector);
+};
+var injectScopingSelector = (selector, scopingSelector) => {
+  return selector.replace(_selectorPartsRe, (_, before = "", _colonGroup, colon = "", after = "") => {
+    return before + scopingSelector + colon + after;
+  });
+};
+var applySimpleSelectorScope = (selector, scopeSelector2, hostSelector) => {
+  _polyfillHostRe.lastIndex = 0;
+  if (_polyfillHostRe.test(selector)) {
+    const replaceBy = `.${hostSelector}`;
+    return selector.replace(_polyfillHostNoCombinatorRe, (_, selector2) => injectScopingSelector(selector2, replaceBy)).replace(_polyfillHostRe, replaceBy + " ");
+  }
+  return scopeSelector2 + " " + selector;
+};
+var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
+  const isRe = /\[is=([^\]]*)\]/g;
+  scopeSelector2 = scopeSelector2.replace(isRe, (_, ...parts) => parts[0]);
+  const className = "." + scopeSelector2;
+  const _scopeSelectorPart = (p) => {
+    let scopedP = p.trim();
+    if (!scopedP) {
+      return "";
+    }
+    if (p.indexOf(_polyfillHostNoCombinator) > -1) {
+      scopedP = applySimpleSelectorScope(p, scopeSelector2, hostSelector);
+    } else {
+      const t = p.replace(_polyfillHostRe, "");
+      if (t.length > 0) {
+        scopedP = injectScopingSelector(t, className);
+      }
+    }
+    return scopedP;
+  };
+  const safeContent = safeSelector(selector);
+  selector = safeContent.content;
+  let scopedSelector = "";
+  let startIndex = 0;
+  let res;
+  const sep = /( |>|\+|~(?!=))\s*/g;
+  const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
+  let shouldScope = !hasHost;
+  while ((res = sep.exec(selector)) !== null) {
+    const separator = res[1];
+    const part2 = selector.slice(startIndex, res.index).trim();
+    shouldScope = shouldScope || part2.indexOf(_polyfillHostNoCombinator) > -1;
+    const scopedPart = shouldScope ? _scopeSelectorPart(part2) : part2;
+    scopedSelector += `${scopedPart} ${separator} `;
+    startIndex = sep.lastIndex;
+  }
+  const part = selector.substring(startIndex);
+  shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+  scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+  return restoreSafeSelector(safeContent.placeholders, scopedSelector);
+};
+var scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
+  return selector.split(",").map((shallowPart) => {
+    if (slotSelector && shallowPart.indexOf("." + slotSelector) > -1) {
+      return shallowPart.trim();
+    }
+    if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
+      return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
+    } else {
+      return shallowPart.trim();
+    }
+  }).join(", ");
+};
+var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
+  return processRules(cssText, (rule) => {
+    let selector = rule.selector;
+    let content = rule.content;
+    if (rule.selector[0] !== "@") {
+      selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
+    } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
+      content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
+    }
+    const cssRule = {
+      selector: selector.replace(/\s{2,}/g, " ").trim(),
+      content
+    };
+    return cssRule;
+  });
+};
+var scopeCssText = (cssText, scopeId2, hostScopeId, slotScopeId, commentOriginalSelector) => {
+  cssText = insertPolyfillHostInCssText(cssText);
+  cssText = convertColonHost(cssText);
+  cssText = convertColonHostContext(cssText);
+  const slotted = convertColonSlotted(cssText, slotScopeId);
+  cssText = slotted.cssText;
+  cssText = convertShadowDOMSelectors(cssText);
+  if (scopeId2) {
+    cssText = scopeSelectors(cssText, scopeId2, hostScopeId, slotScopeId, commentOriginalSelector);
+  }
+  cssText = replaceShadowCssHost(cssText, hostScopeId);
+  cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
+  return {
+    cssText: cssText.trim(),
+    // We need to replace the shadow CSS host string in each of these selectors since we created
+    // them prior to the replacement happening in the components CSS text.
+    slottedSelectors: slotted.selectors.map((ref) => ({
+      orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
+      updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId)
+    }))
+  };
+};
+var replaceShadowCssHost = (cssText, hostScopeId) => {
+  return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+};
+var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
+  const hostScopeId = scopeId2 + "-h";
+  const slotScopeId = scopeId2 + "-s";
+  const commentsWithHash = extractCommentsWithHash(cssText);
+  cssText = stripComments(cssText);
+  const orgSelectors = [];
+  if (commentOriginalSelector) {
+    const processCommentedSelector = (rule) => {
+      const placeholder = `/*!@___${orgSelectors.length}___*/`;
+      const comment = `/*!@${rule.selector}*/`;
+      orgSelectors.push({ placeholder, comment });
+      rule.selector = placeholder + rule.selector;
+      return rule;
+    };
+    cssText = processRules(cssText, (rule) => {
+      if (rule.selector[0] !== "@") {
+        return processCommentedSelector(rule);
+      } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
+        rule.content = processRules(rule.content, processCommentedSelector);
+        return rule;
+      }
+      return rule;
+    });
+  }
+  const scoped = scopeCssText(cssText, scopeId2, hostScopeId, slotScopeId, commentOriginalSelector);
+  cssText = [scoped.cssText, ...commentsWithHash].join("\n");
+  if (commentOriginalSelector) {
+    orgSelectors.forEach(({ placeholder, comment }) => {
+      cssText = cssText.replace(placeholder, comment);
+    });
+  }
+  scoped.slottedSelectors.forEach((slottedSelector) => {
+    const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), "g");
+    cssText = cssText.replace(regex, slottedSelector.updatedSelector);
+  });
+  return cssText;
+};
+
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
 var setMode = (handler) => modeResolutionChain.push(handler);
@@ -1337,7 +1749,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          if ((BUILD10.hydrateServerSide || BUILD10.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+          if ((BUILD10.hydrateServerSide || BUILD10.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
           }
           if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
@@ -1365,7 +1777,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
               styleContainerNode.append(styleElm);
             }
           }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             styleContainerNode.insertBefore(styleElm, null);
           }
         }
@@ -1392,13 +1804,21 @@ var attachStyles = (hostRef) => {
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((BUILD10.shadowDom || BUILD10.scoped) && BUILD10.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+  if ((BUILD10.shadowDom || BUILD10.scoped) && BUILD10.cssAnnotations && (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */ || flags & 128 /* shadowNeedsScopedCss */)) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
   }
   endAttachStyles();
 };
 var getScopeId = (cmp, mode) => "sc-" + (BUILD10.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
+var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
+var hydrateScopedToShadow = () => {
+  const styles2 = doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
+  let i2 = 0;
+  for (; i2 < styles2.length; i2++) {
+    registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
+  }
+};
 
 // src/runtime/vdom/vdom-render.ts
 import { BUILD as BUILD13 } from "@rindo/core/internal/app-data";
@@ -1409,112 +1829,113 @@ import { BUILD as BUILD12 } from "@rindo/core/internal/app-data";
 // src/runtime/vdom/set-accessor.ts
 import { BUILD as BUILD11 } from "@rindo/core/internal/app-data";
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
-  if (oldValue !== newValue) {
-    let isProp = isMemberInElement(elm, memberName);
-    let ln = memberName.toLowerCase();
-    if (BUILD11.vdomClass && memberName === "class") {
-      const classList = elm.classList;
-      const oldClasses = parseClassList(oldValue);
-      let newClasses = parseClassList(newValue);
-      if (BUILD11.hydrateClientSide && elm["s-si"] && initialRender) {
-        newClasses.push(elm["s-si"]);
-        oldClasses.forEach((c) => {
-          if (c.startsWith(elm["s-si"])) newClasses.push(c);
-        });
-        newClasses = [...new Set(newClasses)];
-        classList.add(...newClasses);
-      } else {
-        classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-        classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-      }
-    } else if (BUILD11.vdomStyle && memberName === "style") {
-      if (BUILD11.updatable) {
-        for (const prop in oldValue) {
-          if (!newValue || newValue[prop] == null) {
-            if (!BUILD11.hydrateServerSide && prop.includes("-")) {
-              elm.style.removeProperty(prop);
-            } else {
-              elm.style[prop] = "";
-            }
-          }
-        }
-      }
-      for (const prop in newValue) {
-        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+  if (oldValue === newValue) {
+    return;
+  }
+  let isProp = isMemberInElement(elm, memberName);
+  let ln = memberName.toLowerCase();
+  if (BUILD11.vdomClass && memberName === "class") {
+    const classList = elm.classList;
+    const oldClasses = parseClassList(oldValue);
+    let newClasses = parseClassList(newValue);
+    if (BUILD11.hydrateClientSide && elm["s-si"] && initialRender) {
+      newClasses.push(elm["s-si"]);
+      oldClasses.forEach((c) => {
+        if (c.startsWith(elm["s-si"])) newClasses.push(c);
+      });
+      newClasses = [...new Set(newClasses)];
+      classList.add(...newClasses);
+    } else {
+      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    }
+  } else if (BUILD11.vdomStyle && memberName === "style") {
+    if (BUILD11.updatable) {
+      for (const prop in oldValue) {
+        if (!newValue || newValue[prop] == null) {
           if (!BUILD11.hydrateServerSide && prop.includes("-")) {
-            elm.style.setProperty(prop, newValue[prop]);
+            elm.style.removeProperty(prop);
           } else {
-            elm.style[prop] = newValue[prop];
+            elm.style[prop] = "";
           }
         }
       }
-    } else if (BUILD11.vdomKey && memberName === "key") {
-    } else if (BUILD11.vdomRef && memberName === "ref") {
+    }
+    for (const prop in newValue) {
+      if (!oldValue || newValue[prop] !== oldValue[prop]) {
+        if (!BUILD11.hydrateServerSide && prop.includes("-")) {
+          elm.style.setProperty(prop, newValue[prop]);
+        } else {
+          elm.style[prop] = newValue[prop];
+        }
+      }
+    }
+  } else if (BUILD11.vdomKey && memberName === "key") {
+  } else if (BUILD11.vdomRef && memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if (BUILD11.vdomListener && (BUILD11.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+    if (memberName[2] === "-") {
+      memberName = memberName.slice(3);
+    } else if (isMemberInElement(win, ln)) {
+      memberName = ln.slice(2);
+    } else {
+      memberName = ln[2] + memberName.slice(3);
+    }
+    if (oldValue || newValue) {
+      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+      if (oldValue) {
+        plt.rel(elm, memberName, oldValue, capture);
+      }
       if (newValue) {
-        newValue(elm);
+        plt.ael(elm, memberName, newValue, capture);
       }
-    } else if (BUILD11.vdomListener && (BUILD11.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
-      if (memberName[2] === "-") {
-        memberName = memberName.slice(3);
-      } else if (isMemberInElement(win, ln)) {
-        memberName = ln.slice(2);
-      } else {
-        memberName = ln[2] + memberName.slice(3);
-      }
-      if (oldValue || newValue) {
-        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
-        if (oldValue) {
-          plt.rel(elm, memberName, oldValue, capture);
-        }
-        if (newValue) {
-          plt.ael(elm, memberName, newValue, capture);
-        }
-      }
-    } else if (BUILD11.vdomPropOrAttr) {
-      const isComplex = isComplexType(newValue);
-      if ((isProp || isComplex && newValue !== null) && !isSvg) {
-        try {
-          if (!elm.tagName.includes("-")) {
-            const n = newValue == null ? "" : newValue;
-            if (memberName === "list") {
-              isProp = false;
-            } else if (oldValue == null || elm[memberName] != n) {
-              if (typeof elm.__lookupSetter__(memberName) === "function") {
-                elm[memberName] = n;
-              } else {
-                elm.setAttribute(memberName, n);
-              }
+    }
+  } else if (BUILD11.vdomPropOrAttr) {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] != n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
             }
-          } else if (elm[memberName] !== newValue) {
-            elm[memberName] = newValue;
           }
-        } catch (e) {
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
         }
+      } catch (e) {
       }
-      let xlink = false;
-      if (BUILD11.vdomXlink) {
-        if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
-          memberName = ln;
-          xlink = true;
-        }
+    }
+    let xlink = false;
+    if (BUILD11.vdomXlink) {
+      if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
+        memberName = ln;
+        xlink = true;
       }
-      if (newValue == null || newValue === false) {
-        if (newValue !== false || elm.getAttribute(memberName) === "") {
-          if (BUILD11.vdomXlink && xlink) {
-            elm.removeAttributeNS(XLINK_NS, memberName);
-          } else {
-            elm.removeAttribute(memberName);
-          }
-        }
-      } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
-        newValue = newValue === true ? "" : newValue;
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
         if (BUILD11.vdomXlink && xlink) {
-          elm.setAttributeNS(XLINK_NS, memberName, newValue);
+          elm.removeAttributeNS(XLINK_NS, memberName);
         } else {
-          elm.setAttribute(memberName, newValue);
+          elm.removeAttribute(memberName);
         }
       }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      if (BUILD11.vdomXlink && xlink) {
+        elm.setAttributeNS(XLINK_NS, memberName, newValue);
+      } else {
+        elm.setAttribute(memberName, newValue);
+      }
     }
   }
 };
@@ -1612,6 +2033,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
   } else if (BUILD13.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
     elm = newVNode2.$elm$ = BUILD13.isDebug || BUILD13.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
+    if (BUILD13.vdomAttribute) {
+      updateElement(null, newVNode2, isSvgMode);
+    }
   } else {
     if (BUILD13.svg && !isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
@@ -1654,6 +2078,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       elm["s-cr"] = contentRef;
       elm["s-sn"] = newVNode2.$name$ || "";
       elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
+      patchSlotNode(elm);
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
         if (BUILD13.experimentalSlotFixes) {
@@ -1880,9 +2305,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
           newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
           relocateToHostRoot(newVNode2.$elm$.parentElement);
         }
-      } else {
-        updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
       }
+      updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
     }
     if (BUILD13.updatable && oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
@@ -1969,7 +2393,10 @@ var insertBefore = (parent, newNode, reference) => {
     if (parent.getRootNode().nodeType !== 11 /* DOCUMENT_FRAGMENT_NODE */) {
       patchParentNode(newNode);
     }
-    return parent.insertBefore(newNode, reference);
+    parent.insertBefore(newNode, reference);
+    const { slotNode } = findSlotFromSlottedNode(newNode);
+    if (slotNode) dispatchSlotChangeEvent(slotNode);
+    return newNode;
   }
   if (BUILD13.experimentalSlotFixes && parent.__insertBefore) {
     return parent.__insertBefore(newNode, reference);
@@ -2039,7 +2466,7 @@ render() {
   if (BUILD13.scoped || BUILD13.shadowDom) {
     scopeId = hostElm["s-sc"];
   }
-  useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+  useNativeShadowDom = supportsShadow && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
   if (BUILD13.slotRelocation) {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -2093,7 +2520,7 @@ render() {
               }
             }
           }
-          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](nodeToRelocate);
+          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode);
         } else {
           if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
             if (isInitialLoad) {
@@ -2174,19 +2601,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
       }
     }
     emitLifecycleEvent(elm, "componentWillLoad");
-    if (BUILD14.cmpWillLoad) {
-      maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
-    }
+    maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
   } else {
     emitLifecycleEvent(elm, "componentWillUpdate");
-    if (BUILD14.cmpWillUpdate) {
-      maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
-    }
+    maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
   }
   emitLifecycleEvent(elm, "componentWillRender");
-  if (BUILD14.cmpWillRender) {
-    maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
-  }
+  maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -2294,14 +2715,12 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  if (BUILD14.cmpDidRender) {
-    if (BUILD14.isDev) {
-      hostRef.$flags$ |= 1024 /* devOnRender */;
-    }
-    safeCall(instance, "componentDidRender", void 0, elm);
-    if (BUILD14.isDev) {
-      hostRef.$flags$ &= ~1024 /* devOnRender */;
-    }
+  if (BUILD14.isDev) {
+    hostRef.$flags$ |= 1024 /* devOnRender */;
+  }
+  safeCall(instance, "componentDidRender", void 0, elm);
+  if (BUILD14.isDev) {
+    hostRef.$flags$ &= ~1024 /* devOnRender */;
   }
   emitLifecycleEvent(elm, "componentDidRender");
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
@@ -2309,14 +2728,12 @@ var postUpdateComponent = (hostRef) => {
     if (BUILD14.asyncLoading && BUILD14.cssAnnotations) {
       addHydratedFlag(elm);
     }
-    if (BUILD14.cmpDidLoad) {
-      if (BUILD14.isDev) {
-        hostRef.$flags$ |= 2048 /* devOnDidLoad */;
-      }
-      safeCall(instance, "componentDidLoad", void 0, elm);
-      if (BUILD14.isDev) {
-        hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
-      }
+    if (BUILD14.isDev) {
+      hostRef.$flags$ |= 2048 /* devOnDidLoad */;
+    }
+    safeCall(instance, "componentDidLoad", void 0, elm);
+    if (BUILD14.isDev) {
+      hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
     }
     emitLifecycleEvent(elm, "componentDidLoad");
     endPostUpdate();
@@ -2327,14 +2744,12 @@ var postUpdateComponent = (hostRef) => {
       }
     }
   } else {
-    if (BUILD14.cmpDidUpdate) {
-      if (BUILD14.isDev) {
-        hostRef.$flags$ |= 1024 /* devOnRender */;
-      }
-      safeCall(instance, "componentDidUpdate", void 0, elm);
-      if (BUILD14.isDev) {
-        hostRef.$flags$ &= ~1024 /* devOnRender */;
-      }
+    if (BUILD14.isDev) {
+      hostRef.$flags$ |= 1024 /* devOnRender */;
+    }
+    safeCall(instance, "componentDidUpdate", void 0, elm);
+    if (BUILD14.isDev) {
+      hostRef.$flags$ &= ~1024 /* devOnRender */;
     }
     emitLifecycleEvent(elm, "componentDidUpdate");
     endPostUpdate();
@@ -2466,7 +2881,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         }
       }
       if (BUILD15.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        if (BUILD15.cmpShouldUpdate && instance.componentShouldUpdate) {
+        if (instance.componentShouldUpdate) {
           if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
             return;
           }
@@ -2731,9 +3146,8 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const scopeId2 = getScopeId(cmpMeta, hostRef.$modeName$);
       if (!styles.has(scopeId2)) {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-        if (!BUILD17.hydrateServerSide && BUILD17.shadowDom && // TODO(RINDO-854): Remove code related to legacy shadowDomShim field
-        BUILD17.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-          style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2));
+        if (BUILD17.hydrateServerSide && BUILD17.shadowDom && cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
+          style = scopeCss(style, scopeId2, true);
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
         endRegisterStyles();
@@ -2749,7 +3163,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
 };
 var fireConnectedCallback = (instance, elm) => {
-  if (BUILD17.lazyLoad && BUILD17.connectedCallback) {
+  if (BUILD17.lazyLoad) {
     safeCall(instance, "connectedCallback", void 0, elm);
   }
 };
@@ -2830,12 +3244,9 @@ var setContentReference = (elm) => {
 // src/runtime/disconnected-callback.ts
 import { BUILD as BUILD19 } from "@rindo/core/internal/app-data";
 var disconnectInstance = (instance, elm) => {
-  if (BUILD19.lazyLoad && BUILD19.disconnectedCallback) {
+  if (BUILD19.lazyLoad) {
     safeCall(instance, "disconnectedCallback", void 0, elm || instance);
   }
-  if (BUILD19.cmpDidUnload) {
-    safeCall(instance, "componentDidUnload", void 0, elm || instance);
-  }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
@@ -2904,6 +3315,9 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       patchTextContent(Cstr.prototype);
     }
   }
+  if (BUILD20.hydrateClientSide && BUILD20.shadowDom) {
+    hydrateScopedToShadow();
+  }
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
   Object.assign(Cstr.prototype, {
@@ -2918,25 +3332,15 @@ var proxyCustomElement = (Cstr, compactMeta) => {
         this.__hasHostListenerAttached = true;
       }
       connectedCallback(this);
-      if (BUILD20.connectedCallback && originalConnectedCallback) {
+      if (originalConnectedCallback) {
         originalConnectedCallback.call(this);
       }
     },
     disconnectedCallback() {
       disconnectedCallback(this);
-      if (BUILD20.disconnectedCallback && originalDisconnectedCallback) {
+      if (originalDisconnectedCallback) {
         originalDisconnectedCallback.call(this);
       }
-      plt.raf(() => {
-        var _a;
-        const hostRef = getHostRef(this);
-        if (((_a = hostRef == null ? void 0 : hostRef.$vnode$) == null ? void 0 : _a.$elm$) instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
-          delete hostRef.$vnode$;
-        }
-        if (this instanceof Node && !this.isConnected) {
-          deleteHostRef(this);
-        }
-      });
     },
     __attachShadow() {
       if (supportsShadow) {
@@ -3024,6 +3428,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   if (BUILD21.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
+  if (BUILD21.hydrateClientSide && BUILD21.shadowDom) {
+    hydrateScopedToShadow();
+  }
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
@@ -3412,7 +3819,7 @@ function proxyHostElement(elm, cstr) {
   if (typeof elm.forceUpdate !== "function") {
     elm.forceUpdate = forceUpdate2;
   }
-  if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+  if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
     if (BUILD23.shadowDelegatesFocus) {
       elm.attachShadow({
         mode: "open",
@@ -3453,16 +3860,18 @@ function proxyHostElement(elm, cstr) {
           }
           (_a = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a.set(memberName, attrPropVal);
         }
-        Object.defineProperty(elm, memberName, {
+        const getterSetterDescriptor = {
           get: function() {
             return getValue(this, memberName);
           },
-          set(newValue) {
+          set: function(newValue) {
             setValue(this, memberName, newValue, cmpMeta);
           },
           configurable: true,
           enumerable: true
-        });
+        };
+        Object.defineProperty(elm, memberName, getterSetterDescriptor);
+        Object.defineProperty(elm, metaAttributeName, getterSetterDescriptor);
         if (!cstr.prototype.__rindoAugmented) {
           Object.defineProperty(cstr.prototype, memberName, {
             get: function() {
@@ -3554,6 +3963,15 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
             null
           );
           if (Cstr != null && Cstr.cmpMeta != null) {
+            if (opts.serializeShadowRoot !== false && !!(Cstr.cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && tagRequiresScoped(elm.tagName, opts.serializeShadowRoot)) {
+              const cmpMeta = Cstr.cmpMeta;
+              cmpMeta.$flags$ |= 128 /* shadowNeedsScopedCss */;
+              Object.defineProperty(Cstr, "cmpMeta", {
+                get: function() {
+                  return cmpMeta;
+                }
+              });
+            }
             createdElements.add(elm);
             elm.connectedCallback = patchedConnectedCallback2;
             registerHost(elm, Cstr.cmpMeta);
@@ -3750,6 +4168,25 @@ ${indent}${ln}`;
 function waitingOnElementsMsg(waitingElements) {
   return Array.from(waitingElements).map(waitingOnElementMsg);
 }
+function tagRequiresScoped(tagName, opts) {
+  if (typeof opts === "string") {
+    return opts === "scoped";
+  }
+  if (typeof opts === "boolean") {
+    return opts === true ? false : true;
+  }
+  if (typeof opts === "object") {
+    tagName = tagName.toLowerCase();
+    if (Array.isArray(opts["declarative-shadow-dom"]) && opts["declarative-shadow-dom"].includes(tagName)) {
+      return false;
+    } else if ((!Array.isArray(opts.scoped) || !opts.scoped.includes(tagName)) && opts.default === "declarative-shadow-dom") {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return false;
+}
 
 // src/hydrate/platform/index.ts
 import { BUILD as BUILD25, Env, NAMESPACE as NAMESPACE2 } from "@rindo/core/internal/app-data";
@@ -3841,15 +4278,19 @@ var setPlatformHelpers = (helpers) => {
 var supportsShadow = BUILD24.shadowDom;
 var supportsListenerOptions = false;
 var supportsConstructableStylesheets = false;
-var hostRefs = /* @__PURE__ */ new WeakMap();
-var getHostRef = (ref) => hostRefs.get(ref);
-var deleteHostRef = (ref) => hostRefs.delete(ref);
+var getHostRef = (ref) => {
+  if (ref.__rindo__getHostRef) {
+    return ref.__rindo__getHostRef();
+  }
+  return void 0;
+};
 var registerInstance = (lazyInstance, hostRef) => {
-  const ref = hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
+  lazyInstance.__rindo__getHostRef = () => hostRef;
+  hostRef.$lazyInstance$ = lazyInstance;
   if (BUILD24.modernPropertyDecls && (BUILD24.state || BUILD24.prop)) {
     reWireGetterSetter(lazyInstance, hostRef);
   }
-  return ref;
+  return hostRef;
 };
 var registerHost = (elm, cmpMeta) => {
   const hostRef = {
@@ -3863,7 +4304,8 @@ var registerHost = (elm, cmpMeta) => {
   hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
   elm["s-p"] = [];
   elm["s-rc"] = [];
-  return hostRefs.set(elm, hostRef);
+  elm.__rindo__getHostRef = () => hostRef;
+  return hostRef;
 };
 var Build = {
   isDev: false,
@@ -3890,7 +4332,6 @@ export {
   consoleError,
   createEvent,
   defineCustomElement,
-  deleteHostRef,
   disconnectedCallback,
   doc,
   forceModeUpdate,