@rindo/core 4.25.3 → 4.26.0

package/internal/hydrate/runner.js

@@ -1,5 +1,5 @@
 /*
- Rindo Hydrate Runner v4.25.3 | MIT Licensed | https://rindojs.web.app
+ Rindo Hydrate Runner v4.26.0 | MIT Licensed | https://rindojs.web.app
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -10416,7 +10416,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" ? true : opts.serializeShadowRoot,
+    serializeShadowRoot: typeof opts.serializeShadowRoot === "undefined" ? "declarative-shadow-dom" : opts.serializeShadowRoot,
     fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
   };
 }
@@ -10545,7 +10545,7 @@ style="${cssText}">`;
     }
     if (EMPTY_ELEMENTS.has(tagName) === false) {
       const shadowRoot = node.shadowRoot;
-      if (shadowRoot != null && opts.serializeShadowRoot) {
+      if (shadowRoot != null && opts.serializeShadowRoot !== false) {
         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);
@@ -14342,6 +14342,31 @@ import { BUILD as BUILD11 } from "@rindo/core/internal/app-data";
 // src/runtime/initialize-component.ts
 import { BUILD as BUILD23 } 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 _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 createSupportsRuleRe = (selector) => new RegExp(`((?<!(^@supports(.*)))|(?<={.*))(${selector}\\b)`, "gim");
+var _colonSlottedRe = createSupportsRuleRe("::slotted");
+var _colonHostRe = createSupportsRuleRe(":host");
+var _colonHostContextRe = createSupportsRuleRe(":host-context");
+
 // src/runtime/mode.ts
 var setMode = (handler) => modeResolutionChain.push(handler);
 
@@ -15569,7 +15594,7 @@ function renderToString(html, options, asStream) {
   const opts = normalizeHydrateOptions(options);
   opts.serializeToHtml = true;
   opts.fullDocument = typeof opts.fullDocument === "boolean" ? opts.fullDocument : true;
-  opts.serializeShadowRoot = typeof opts.serializeShadowRoot === "boolean" ? opts.serializeShadowRoot : true;
+  opts.serializeShadowRoot = typeof opts.serializeShadowRoot === "undefined" ? "declarative-shadow-dom" : opts.serializeShadowRoot;
   opts.constrainTimeouts = false;
   return hydrateDocument(html, opts, asStream);
 }

package/internal/package.json

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

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

@@ -849,12 +849,29 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
      */
     removeHtmlComments?: boolean;
     /**
-     * If set to `true` the component will be rendered within a Declarative Shadow DOM.
-     * If set to `false` Rindo will ignore the contents of the shadow root and render the
-     * element as given in provided template.
-     * @default true
-     */
-    serializeShadowRoot?: boolean;
+     * Configure how Rindo serializes the components shadow root.
+     * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
+     * - If set to `scoped` Rindo will render the contents of the shadow root as a `scoped: true` component
+     *   and the shadow DOM will be created during client-side hydration.
+     * - Alternatively you can mix and match the two by providing an object with `declarative-shadow-dom` and `scoped` keys,
+     * the value arrays containing the tag names of the components that should be rendered in that mode.
+     *
+     * Examples:
+     * - `{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }`
+     * Render all components as `scoped` apart from `my-component-1` and `another-component`
+     * -  `{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }`
+     * Render all components within `declarative-shadow-dom` apart from `an-option-component`
+     * - `'scoped'` Render all components as `scoped`
+     * - `false` disables shadow root serialization
+     *
+     * *NOTE* `true` has been deprecated in favor of `declarative-shadow-dom` and `scoped`
+     * @default 'declarative-shadow-dom'
+     */
+    serializeShadowRoot?: 'declarative-shadow-dom' | 'scoped' | {
+        'declarative-shadow-dom'?: string[];
+        scoped?: string[];
+        default: 'declarative-shadow-dom' | 'scoped';
+    } | boolean;
     /**
      * The `fullDocument` flag determines the format of the rendered output. Set it to true to
      * generate a complete HTML document, or false to render only the component.

package/internal/testing/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/testing/platform/index.ts
@@ -411,6 +401,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, {
@@ -1225,7 +1220,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;
@@ -1319,13 +1314,25 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (import_app_data5.BUILD.shadowDom && shadowRoot) {
+  if (import_app_data5.BUILD.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();
 };
@@ -1436,7 +1443,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);
@@ -1452,7 +1459,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();
@@ -1486,6 +1493,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;
 };
@@ -1575,10 +1586,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
 var import_app_data16 = require("@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);
@@ -1684,7 +2052,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          if ((import_app_data9.BUILD.hydrateServerSide || import_app_data9.BUILD.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+          if ((import_app_data9.BUILD.hydrateServerSide || import_app_data9.BUILD.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
           }
           if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
@@ -1712,7 +2080,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);
           }
         }
@@ -1739,13 +2107,21 @@ var attachStyles = (hostRef) => {
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((import_app_data9.BUILD.shadowDom || import_app_data9.BUILD.scoped) && import_app_data9.BUILD.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+  if ((import_app_data9.BUILD.shadowDom || import_app_data9.BUILD.scoped) && import_app_data9.BUILD.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-" + (import_app_data9.BUILD.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
 var import_app_data12 = require("@rindo/core/internal/app-data");
@@ -2386,7 +2762,7 @@ render() {
   if (import_app_data12.BUILD.scoped || import_app_data12.BUILD.shadowDom) {
     scopeId = hostElm["s-sc"];
   }
-  useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+  useNativeShadowDom = supportsShadow && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
   if (import_app_data12.BUILD.slotRelocation) {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -3078,9 +3454,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 (!import_app_data16.BUILD.hydrateServerSide && import_app_data16.BUILD.shadowDom && // TODO(RINDO-854): Remove code related to legacy shadowDomShim field
-        import_app_data16.BUILD.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-          style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2));
+        if (import_app_data16.BUILD.hydrateServerSide && import_app_data16.BUILD.shadowDom && cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
+          style = scopeCss(style, scopeId2, true);
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
         endRegisterStyles();
@@ -3251,6 +3626,9 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       patchTextContent(Cstr.prototype);
     }
   }
+  if (import_app_data19.BUILD.hydrateClientSide && import_app_data19.BUILD.shadowDom) {
+    hydrateScopedToShadow();
+  }
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
   Object.assign(Cstr.prototype, {
@@ -3371,6 +3749,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   if (import_app_data20.BUILD.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
+  if (import_app_data20.BUILD.hydrateClientSide && import_app_data20.BUILD.shadowDom) {
+    hydrateScopedToShadow();
+  }
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {

package/internal/testing/package.json

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