@phatvu/web-component-poc 1.0.1 → 1.0.3

package/hydrate/index.mjs

@@ -130,7 +130,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'web-component-poc';
-const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", prop: true, propChangeCallback: false, slotRelocation: true, updatable: true};
+const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", prop: true, propChangeCallback: false, shadowDom: false, slotRelocation: true, updatable: true};
 
 /*
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -730,21 +730,13 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
 var attachStyles = (hostRef) => {
   const cmpMeta = hostRef.$cmpMeta$;
   const elm = hostRef.$hostElement$;
-  const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+  addStyle(
+    elm.getRootNode(),
     cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
   endAttachStyles();
 };
 var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
-
-// src/utils/helpers.ts
-var isDef = (v) => v != null && v !== void 0;
 var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
@@ -838,7 +830,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const childRenderNodes = [];
   const slotNodes = [];
   const slottedNodes = [];
-  const shadowRootNodes = shadowRoot ? [] : null;
+  const shadowRootNodes = null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
   if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
@@ -946,27 +938,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       currentPos = (slottedItem.node["s-oo"] || currentPos) + 1;
     }
   }
-  if (shadowRoot && !shadowRoot.childNodes.length) {
-    let rnIdex = 0;
-    const rnLen = shadowRootNodes.length;
-    if (rnLen) {
-      for (rnIdex; rnIdex < rnLen; rnIdex++) {
-        const node = shadowRootNodes[rnIdex];
-        if (node) {
-          shadowRoot.appendChild(node);
-        }
-      }
-      Array.from(hostElm.childNodes).forEach((node) => {
-        if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
-          if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
-            node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue) {
-            node.parentNode.removeChild(node);
-          }
-        }
-      });
-    }
-  }
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -1019,9 +990,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           parentVNode.$children$[childVNode.$index$] = childVNode;
         }
         parentVNode = childVNode;
-        if (shadowRootNodes && childVNode.$depth$ === "0") {
-          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-        }
       }
     }
     if (node.shadowRoot) {
@@ -1080,9 +1048,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             }
             parentVNode.$children$[childVNode.$index$] = childVNode;
           }
-          if (shadowRootNodes && childVNode.$depth$ === "0") {
-            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-          }
         }
       } else if (childNodeType === COMMENT_NODE_ID) {
         childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
@@ -1105,9 +1070,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             slottedNodes
           );
         } else if (childNodeType === CONTENT_REF_ID) {
-          if (shadowRootNodes) {
-            node.remove();
-          } else {
+          {
             hostElm["s-cr"] = node;
             node["s-cn"] = true;
           }
@@ -1169,22 +1132,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   childVNode.$name$ = slotName || null;
   childVNode.$tag$ = "slot";
   const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  if (shadowRootNodes && win.document) {
-    const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
-    if (childVNode.$name$) {
-      childVNode.$elm$.setAttribute("name", slotName);
-    }
-    if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
-      internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
-    } else {
-      internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
-    }
-    addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
-    node.remove();
-    if (childVNode.$depth$ === "0") {
-      shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-    }
-  } else {
+  {
     const slot = childVNode.$elm$;
     const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
     addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
@@ -1221,417 +1169,6 @@ var findCorrespondingNode = (node, type) => {
   return sibling;
 };
 
-// src/utils/regular-expression.ts
-var escapeRegExpSpecialCharacters = (text) => {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-};
-
-// 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(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
-    const replaceBy = `__part-${index}__`;
-    placeholders.push(keep);
-    index++;
-    return replaceBy;
-  });
-  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) => {
-  content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
-  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 _safePartRe = /__part-(\d+)__/g;
-var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
-var _polyfillHostRe = /-shadowcsshost/gim;
-var createSupportsRuleRe = (selector) => {
-  const safeSelector2 = escapeRegExpSpecialCharacters(selector);
-  return new RegExp(
-    // First capture group: match any context before the selector that's not inside @supports selector()
-    // Using negative lookahead to avoid matching inside @supports selector(...) condition
-    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
-    "g"
-  );
-};
-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) => {
-  const supportsBlocks = [];
-  cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
-    const placeholder = `__supports_${supportsBlocks.length}__`;
-    supportsBlocks.push(selectorContent);
-    return `@supports selector(${placeholder})`;
-  });
-  const _colonSlottedRe = createSupportsRuleRe("::slotted");
-  const _colonHostRe = createSupportsRuleRe(":host");
-  const _colonHostContextRe = createSupportsRuleRe(":host-context");
-  cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
-  supportsBlocks.forEach((originalSelector, index) => {
-    cssText = cssText.replace(`__supports_${index}__`, originalSelector);
-  });
-  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 sep2 = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
-  const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
-  let shouldScope = !hasHost;
-  while ((res = sep2.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 = sep2.lastIndex;
-  }
-  const part = selector.substring(startIndex);
-  shouldScope = !part.match(_safePartRe) && (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);
-    }
-    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);
-  }
-  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 expandPartSelectors = (cssText) => {
-  const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
-  return processRules(cssText, (rule) => {
-    if (rule.selector[0] === "@") {
-      return rule;
-    }
-    const selectors = rule.selector.split(",").map((sel) => {
-      const out = [sel.trim()];
-      let m;
-      while ((m = partSelectorRe.exec(sel)) !== null) {
-        const before = m[1].trimEnd();
-        const partNames = m[2].trim().split(/\s+/);
-        const after = m[3] || "";
-        const partAttr = partNames.flatMap((p) => {
-          if (!rule.selector.includes(`[part~="${p}"]`)) {
-            return [`[part~="${p}"]`];
-          }
-          return [];
-        }).join("");
-        const expanded = `${before} ${partAttr}${after}`;
-        if (!!partAttr && expanded !== sel.trim()) {
-          out.push(expanded);
-        }
-      }
-      return out.join(", ");
-    });
-    rule.selector = selectors.join(", ");
-    return rule;
-  });
-};
-var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
-  const hostScopeId = scopeId2 + "-h";
-  const slotScopeId = scopeId2 + "-s";
-  const commentsWithHash = extractCommentsWithHash(cssText);
-  cssText = stripComments(cssText);
-  const orgSelectors = [];
-  {
-    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);
-  cssText = [scoped.cssText, ...commentsWithHash].join("\n");
-  {
-    orgSelectors.forEach(({ placeholder, comment }) => {
-      cssText = cssText.replace(placeholder, comment);
-    });
-  }
-  scoped.slottedSelectors.forEach((slottedSelector) => {
-    const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector) + "(?=\\s*[,{]|$)", "g");
-    cssText = cssText.replace(regex, slottedSelector.updatedSelector);
-  });
-  cssText = expandPartSelectors(cssText);
-  return cssText;
-};
-
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -1961,9 +1498,6 @@ function sortedAttrNames(attrNames) {
     attrNames
   );
 }
-
-// src/runtime/vdom/vdom-render.ts
-var scopeId;
 var contentRef;
 var hostTagName;
 var useNativeShadowDom = false;
@@ -2018,9 +1552,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     {
       updateElement(null, newVNode2, isSvgMode);
     }
-    if (isDef(scopeId) && elm["s-si"] !== scopeId) {
-      elm.classList.add(elm["s-si"] = scopeId);
-    }
     if (newVNode2.$children$) {
       const appendTarget = newVNode2.$tag$ === "template" ? elm.content : elm;
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
@@ -2106,9 +1637,6 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
   let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
-  if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
-    containerElm = containerElm.shadowRoot;
-  }
   if (parentVNode.$tag$ === "template") {
     containerElm = containerElm.content;
   }
@@ -2422,11 +1950,8 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
-  {
-    scopeId = hostElm["s-sc"];
-  }
-  useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
+  rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
+  useNativeShadowDom = supportsShadow;
   {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -2884,13 +2409,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         const scopeId2 = getScopeId(cmpMeta);
         if (!styles.has(scopeId2) || BUILD.hotModuleReplacement) {
           const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-          {
-            if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
-              style = scopeCss(style, scopeId2);
-            } else if (needsScopedSSR()) {
-              style = expandPartSelectors(style);
-            }
-          }
           registerStyle(scopeId2, style);
           endRegisterStyles();
         }
@@ -2935,10 +2453,6 @@ var connectedCallback = (elm) => {
       {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
-            elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
-          }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
@@ -4651,7 +4165,6 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
   const orgDocumentCreateElement = win2.document.createElement;
   const orgDocumentCreateElementNS = win2.document.createElementNS;
   const resolved2 = Promise.resolve();
-  setScopedSSR(opts);
   let tmrId;
   let ranCompleted = false;
   function hydratedComplete() {
@@ -4981,6 +4494,7 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new win.CustomEvent(eventName, opts)
 };
+var supportsShadow = BUILD.shadowDom;
 var getHostRef = (ref) => {
   if (ref.__stencil__getHostRef) {
     return ref.__stencil__getHostRef();
@@ -5014,11 +4528,6 @@ var registerHost = (elm, cmpMeta) => {
   return hostRef;
 };
 var styles = /* @__PURE__ */ new Map();
-var setScopedSSR = (opts) => {
-  scopedSSR = opts.serializeShadowRoot !== false && opts.serializeShadowRoot !== "declarative-shadow-dom";
-};
-var needsScopedSSR = () => scopedSSR;
-var scopedSSR = false;
 
 function isNumber(subject) {
   return typeof subject === 'number';
@@ -6913,17 +6422,17 @@ class AppCarousel {
     render() {
         const itemsArray = this.getItemsArray();
         const useItems = itemsArray !== undefined && itemsArray.length > 0;
-        return (hAsync("div", { key: '313c58e9c1ea3b9c0d0fd4b9d6354336682d9353', class: `carousel ${this.class || ''}`.trim() }, hAsync("div", { key: '14ad75526a24ed38df053fa221e2fafef6d532ed', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, hAsync("div", { key: '1d3a771598c382592b789289494f2439fea56918', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
+        return (hAsync("div", { key: '3a2ea6c339bf0fe656e5a333789df7a37156b5dc', class: `carousel ${this.class || ''}`.trim() }, hAsync("div", { key: '0a73b925095ae3188e5e40b024bc250e4c183894', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, hAsync("div", { key: '7fc3b5a72e386f7fa21702aeb363e08da1b728cf', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
             ? itemsArray.map((item, i) => (hAsync("div", { key: i, class: `carousel__slide ${this.itemClass || ''}`.trim() }, typeof item === 'object' &&
                 item !== null &&
                 'content' in item
                 ? item.content
                 : String(item))))
-            : null)), !useItems && (hAsync("div", { key: 'cdecd3275ac3c5ffe7a0f46153d3e59ad0d4ba9d', style: { display: 'none' }, "aria-hidden": "true" }, hAsync("slot", { key: '450dd5b90f20166a4d6ef4a0d46d208ad47bbf4b', ref: (el) => (this.slotRef = el) }))), hAsync("div", { key: 'ad4eab3f45204170308d8021799d227eaff36d71', class: `carousel__controls ${this.controlClass || ''}`.trim() }, hAsync("button", { key: '1a4ef7209ea768a55892f4d928da3f6100faab4b', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, hAsync("svg", { key: '7d579cb030149947791db565bc1520ef2707c360', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: 'fdca1a876d4967c39286bddba6122351fbf0d925', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), hAsync("div", { key: '4d9a30f1988f2ce04f271967f1dd39c5287273f2', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), hAsync("button", { key: 'c8bc7787821f3277c6d038e3ff1240b3ce936825', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, hAsync("svg", { key: 'e6e4eff954b1b08711cc843de558e00a8257e9f8', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: '37b394093f327bdc46f8da1dcf78ec609a585a0a', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
+            : null)), !useItems && (hAsync("div", { key: 'dee2fc91470728c136c9853cd74ae350ad3c5676', style: { display: 'none' }, "aria-hidden": "true" }, hAsync("slot", { key: '35dd47c03a1b9b6b73d845252c3d0482590f7da2', ref: (el) => (this.slotRef = el) }))), hAsync("div", { key: 'df639ad86ae8533f1dc15eed30afb70d99e36e1a', class: `carousel__controls ${this.controlClass || ''}`.trim() }, hAsync("button", { key: 'c17c0ea9bf023b5d2621e558c957d92b13425584', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, hAsync("svg", { key: '5125abcae0b08ee72106d511b4c24c2d0f24187b', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: '9b7f28be56f451ad14de226d7163a5587a1cd9e6', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), hAsync("div", { key: '9939d3496092a3f319efac9132cec8097c83b497', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), hAsync("button", { key: 'a0b1228f6df0065885f1d272386283926e78464b', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, hAsync("svg", { key: 'e00c92cc0485f41a30e97d5d0466aaee48a64998', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: 'a35c46fdbd1cd333d3e6f76590f45dd837546165', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
     }
     static get style() { return carouselCss(); }
     static get cmpMeta() { return {
-        "$flags$": 777,
+        "$flags$": 772,
         "$tagName$": "fast-carousel",
         "$members$": {
             "items": [1],
@@ -6975,15 +6484,15 @@ class CustomButton {
         this.buttonClick.emit(e);
     };
     render() {
-        return (hAsync("button", { key: 'b373f44e11e651d0371ce3cade98b4650ccdd727', type: this.type, class: {
+        return (hAsync("button", { key: '3b74909afe4e305dfd38f0b07657202e3d5bfccd', type: this.type, class: {
                 'custom-button': true,
                 [`custom-button--${this.variant}`]: true,
                 'custom-button--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, hAsync("slot", { key: '2a046bc70af051c04f4549def87dac7044b41e04' })));
+            }, disabled: this.disabled, onClick: this.handleClick }, hAsync("slot", { key: '49845d350e4665c5c66e30bd9262f788eaaa1e20' })));
     }
     static get style() { return buttonCss(); }
     static get cmpMeta() { return {
-        "$flags$": 777,
+        "$flags$": 772,
         "$tagName$": "fast-button",
         "$members$": {
             "variant": [1],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phatvu/web-component-poc",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",