@stencil/core 2.10.0 → 2.12.1

package/internal/hydrate/shadow-css.js

@@ -1,10 +1,10 @@
-const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColonHostRe = new RegExp("(-shadowcsshost" + _parenSuffix, "gim"), _cssColonHostContextRe = new RegExp("(-shadowcsscontext" + _parenSuffix, "gim"), _cssColonSlottedRe = new RegExp("(-shadowcssslotted" + _parenSuffix, "gim"), _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/, _shadowDOMSelectorsRe = [ /::shadow/g, /::content/g ], _polyfillHostRe = /-shadowcsshost/gim, _colonHostRe = /:host/gim, _colonSlottedRe = /::slotted/gim, _colonHostContextRe = /:host-context/gim, _commentRe = /\/\*\s*[\s\S]*?\*\//g, _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g, _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g, _curlyRe = /([{}])/g, processRules = (e, t) => {
- const s = escapeBlocks(e);
- let o = 0;
- return s.escapedString.replace(_ruleRe, ((...e) => {
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColonHostRe = new RegExp("(-shadowcsshost" + _parenSuffix, "gim"), _cssColonHostContextRe = new RegExp("(-shadowcsscontext" + _parenSuffix, "gim"), _cssColonSlottedRe = new RegExp("(-shadowcssslotted" + _parenSuffix, "gim"), _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/, _shadowDOMSelectorsRe = [ /::shadow/g, /::content/g ], _polyfillHostRe = /-shadowcsshost/gim, _colonHostRe = /:host/gim, _colonSlottedRe = /::slotted/gim, _colonHostContextRe = /:host-context/gim, _commentRe = /\/\*\s*[\s\S]*?\*\//g, _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g, _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g, _curlyRe = /([{}])/g, _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/, processRules = (e, t) => {
+ const o = escapeBlocks(e);
+ let s = 0;
+ return o.escapedString.replace(_ruleRe, ((...e) => {
   const c = e[2];
   let r = "", n = e[4], l = "";
-  n && n.startsWith("{%BLOCK%") && (r = s.blocks[o++], n = n.substring("%BLOCK%".length + 1), 
+  n && n.startsWith("{%BLOCK%") && (r = o.blocks[s++], n = n.substring("%BLOCK%".length + 1), 
   l = "{");
   const a = t({
    selector: c,
@@ -13,111 +13,108 @@ const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColo
   return `${e[1]}${a.selector}${e[3]}${l}${a.content}${n}`;
  }));
 }, escapeBlocks = e => {
- const t = e.split(_curlyRe), s = [], o = [];
+ const t = e.split(_curlyRe), o = [], s = [];
  let c = 0, r = [];
  for (let e = 0; e < t.length; e++) {
   const n = t[e];
-  "}" === n && c--, c > 0 ? r.push(n) : (r.length > 0 && (o.push(r.join("")), s.push("%BLOCK%"), 
-  r = []), s.push(n)), "{" === n && c++;
+  "}" === n && c--, c > 0 ? r.push(n) : (r.length > 0 && (s.push(r.join("")), o.push("%BLOCK%"), 
+  r = []), o.push(n)), "{" === n && c++;
  }
- return r.length > 0 && (o.push(r.join("")), s.push("%BLOCK%")), {
-  escapedString: s.join(""),
-  blocks: o
+ return r.length > 0 && (s.push(r.join("")), o.push("%BLOCK%")), {
+  escapedString: o.join(""),
+  blocks: s
  };
-}, convertColonRule = (e, t, s) => e.replace(t, ((...e) => {
+}, convertColonRule = (e, t, o) => e.replace(t, ((...e) => {
  if (e[2]) {
-  const t = e[2].split(","), o = [];
+  const t = e[2].split(","), s = [];
   for (let c = 0; c < t.length; c++) {
    const r = t[c].trim();
    if (!r) break;
-   o.push(s("-shadowcsshost-no-combinator", r, e[3]));
+   s.push(o("-shadowcsshost-no-combinator", r, e[3]));
   }
-  return o.join(",");
+  return s.join(",");
  }
  return "-shadowcsshost-no-combinator" + e[3];
-})), colonHostPartReplacer = (e, t, s) => e + t.replace("-shadowcsshost", "") + s, colonHostContextPartReplacer = (e, t, s) => t.indexOf("-shadowcsshost") > -1 ? colonHostPartReplacer(e, t, s) : e + t + s + ", " + t + " " + e + s, scopeSelectors = (e, t, s, o, c) => processRules(e, (e => {
+})), colonHostPartReplacer = (e, t, o) => e + t.replace("-shadowcsshost", "") + o, colonHostContextPartReplacer = (e, t, o) => t.indexOf("-shadowcsshost") > -1 ? colonHostPartReplacer(e, t, o) : e + t + o + ", " + t + " " + e + o, injectScopingSelector = (e, t) => e.replace(_selectorPartsRe, ((e, o = "", s, c = "", r = "") => o + t + c + r)), scopeSelectors = (e, t, o, s, c) => processRules(e, (e => {
  let c = e.selector, r = e.content;
- return "@" !== e.selector[0] ? c = ((e, t, s, o) => e.split(",").map((e => o && e.indexOf("." + o) > -1 ? e.trim() : ((e, t) => !(e => (e = e.replace(/\[/g, "\\[").replace(/\]/g, "\\]"), 
- new RegExp("^(" + e + ")([>\\s~+[.,{:][\\s\\S]*)?$", "m")))(t).test(e))(e, t) ? ((e, t, s) => {
-  const o = "." + (t = t.replace(/\[is=([^\]]*)\]/g, ((e, ...t) => t[0]))), c = e => {
+ return "@" !== e.selector[0] ? c = ((e, t, o, s) => e.split(",").map((e => s && e.indexOf("." + s) > -1 ? e.trim() : ((e, t) => !(e => (e = e.replace(/\[/g, "\\[").replace(/\]/g, "\\]"), 
+ new RegExp("^(" + e + ")([>\\s~+[.,{:][\\s\\S]*)?$", "m")))(t).test(e))(e, t) ? ((e, t, o) => {
+  const s = "." + (t = t.replace(/\[is=([^\]]*)\]/g, ((e, ...t) => t[0]))), c = e => {
    let c = e.trim();
    if (!c) return "";
-   if (e.indexOf("-shadowcsshost-no-combinator") > -1) c = ((e, t, s) => {
+   if (e.indexOf("-shadowcsshost-no-combinator") > -1) c = ((e, t, o) => {
     if (_polyfillHostRe.lastIndex = 0, _polyfillHostRe.test(e)) {
-     const t = `.${s}`;
-     return e.replace(_polyfillHostNoCombinatorRe, ((e, s) => s.replace(/([^:]*)(:*)(.*)/, ((e, s, o, c) => s + t + o + c)))).replace(_polyfillHostRe, t + " ");
+     const t = `.${o}`;
+     return e.replace(_polyfillHostNoCombinatorRe, ((e, o) => injectScopingSelector(o, t))).replace(_polyfillHostRe, t + " ");
     }
     return t + " " + e;
-   })(e, t, s); else {
+   })(e, t, o); else {
     const t = e.replace(_polyfillHostRe, "");
-    if (t.length > 0) {
-     const e = t.match(/([^:]*)(:*)(.*)/);
-     e && (c = e[1] + o + e[2] + e[3]);
-    }
+    t.length > 0 && (c = injectScopingSelector(t, s));
    }
    return c;
   }, r = (e => {
    const t = [];
-   let s, o = 0;
-   return s = (e = e.replace(/(\[[^\]]*\])/g, ((e, s) => {
-    const c = `__ph-${o}__`;
-    return t.push(s), o++, c;
-   }))).replace(/(:nth-[-\w]+)(\([^)]+\))/g, ((e, s, c) => {
-    const r = `__ph-${o}__`;
-    return t.push(c), o++, s + r;
+   let o, s = 0;
+   return o = (e = e.replace(/(\[[^\]]*\])/g, ((e, o) => {
+    const c = `__ph-${s}__`;
+    return t.push(o), s++, c;
+   }))).replace(/(:nth-[-\w]+)(\([^)]+\))/g, ((e, o, c) => {
+    const r = `__ph-${s}__`;
+    return t.push(c), s++, o + r;
    })), {
-    content: s,
+    content: o,
     placeholders: t
    };
   })(e);
   let n, l = "", a = 0;
-  const p = /( |>|\+|~(?!=))\s*/g;
-  let i = !((e = r.content).indexOf("-shadowcsshost-no-combinator") > -1);
-  for (;null !== (n = p.exec(e)); ) {
-   const t = n[1], s = e.slice(a, n.index).trim();
-   i = i || s.indexOf("-shadowcsshost-no-combinator") > -1, l += `${i ? c(s) : s} ${t} `, 
-   a = p.lastIndex;
+  const i = /( |>|\+|~(?!=))\s*/g;
+  let p = !((e = r.content).indexOf("-shadowcsshost-no-combinator") > -1);
+  for (;null !== (n = i.exec(e)); ) {
+   const t = n[1], o = e.slice(a, n.index).trim();
+   p = p || o.indexOf("-shadowcsshost-no-combinator") > -1, l += `${p ? c(o) : o} ${t} `, 
+   a = i.lastIndex;
   }
   const h = e.substring(a);
-  return i = i || h.indexOf("-shadowcsshost-no-combinator") > -1, l += i ? c(h) : h, 
+  return p = p || h.indexOf("-shadowcsshost-no-combinator") > -1, l += p ? c(h) : h, 
   u = r.placeholders, l.replace(/__ph-(\d+)__/g, ((e, t) => u[+t]));
   var u;
- })(e, t, s).trim() : e.trim())).join(", "))(e.selector, t, s, o) : (e.selector.startsWith("@media") || e.selector.startsWith("@supports") || e.selector.startsWith("@page") || e.selector.startsWith("@document")) && (r = scopeSelectors(e.content, t, s, o)), 
+ })(e, t, o).trim() : e.trim())).join(", "))(e.selector, t, o, s) : (e.selector.startsWith("@media") || e.selector.startsWith("@supports") || e.selector.startsWith("@page") || e.selector.startsWith("@document")) && (r = scopeSelectors(e.content, t, o, s)), 
  {
   selector: c.replace(/\s{2,}/g, " ").trim(),
   content: r
  };
-})), scopeCss = (e, t, s) => {
- const o = t + "-h", c = t + "-s", r = e.match(_commentWithHashRe) || [];
+})), scopeCss = (e, t, o) => {
+ const s = t + "-h", c = t + "-s", r = e.match(_commentWithHashRe) || [];
  e = e.replace(_commentRe, "");
  const n = [];
- if (s) {
+ if (o) {
   const t = e => {
-   const t = `/*!@___${n.length}___*/`, s = `/*!@${e.selector}*/`;
+   const t = `/*!@___${n.length}___*/`, o = `/*!@${e.selector}*/`;
    return n.push({
     placeholder: t,
-    comment: s
+    comment: o
    }), e.selector = t + e.selector, e;
   };
   e = processRules(e, (e => "@" !== e.selector[0] ? t(e) : e.selector.startsWith("@media") || e.selector.startsWith("@supports") || e.selector.startsWith("@page") || e.selector.startsWith("@document") ? (e.content = processRules(e.content, t), 
   e) : e));
  }
- const l = ((e, t, s, o, c) => {
+ const l = ((e, t, o, s, c) => {
   const r = ((e, t) => {
-   const s = "." + t + " > ", o = [];
+   const o = "." + t + " > ", s = [];
    return e = e.replace(_cssColonSlottedRe, ((...e) => {
     if (e[2]) {
-     const t = e[2].trim(), c = e[3], r = s + t + c;
+     const t = e[2].trim(), c = e[3], r = o + t + c;
      let n = "";
      for (let t = e[4] - 1; t >= 0; t--) {
-      const s = e[5][t];
-      if ("}" === s || "," === s) break;
-      n = s + n;
+      const o = e[5][t];
+      if ("}" === o || "," === o) break;
+      n = o + n;
      }
      const l = n + r, a = `${n.trimRight()}${r.trim()}`;
      if (l.trim() !== a.trim()) {
       const e = `${a}, ${l}`;
-      o.push({
+      s.push({
        orgSelector: l,
        updatedSelector: e
       });
@@ -126,18 +123,18 @@ const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColo
     }
     return "-shadowcsshost-no-combinator" + e[3];
    })), {
-    selectors: o,
+    selectors: s,
     cssText: e
    };
-  })(e = (e => convertColonRule(e, _cssColonHostContextRe, colonHostContextPartReplacer))(e = (e => convertColonRule(e, _cssColonHostRe, colonHostPartReplacer))(e = e.replace(_colonHostContextRe, "-shadowcsscontext").replace(_colonHostRe, "-shadowcsshost").replace(_colonSlottedRe, "-shadowcssslotted"))), o);
+  })(e = (e => convertColonRule(e, _cssColonHostContextRe, colonHostContextPartReplacer))(e = (e => convertColonRule(e, _cssColonHostRe, colonHostPartReplacer))(e = e.replace(_colonHostContextRe, "-shadowcsscontext").replace(_colonHostRe, "-shadowcsshost").replace(_colonSlottedRe, "-shadowcssslotted"))), s);
   return e = (e => _shadowDOMSelectorsRe.reduce(((e, t) => e.replace(t, " ")), e))(e = r.cssText), 
-  t && (e = scopeSelectors(e, t, s, o)), {
-   cssText: (e = (e = e.replace(/-shadowcsshost-no-combinator/g, `.${s}`)).replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ")).trim(),
+  t && (e = scopeSelectors(e, t, o, s)), {
+   cssText: (e = (e = e.replace(/-shadowcsshost-no-combinator/g, `.${o}`)).replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ")).trim(),
    slottedSelectors: r.selectors
   };
- })(e, t, o, c);
- return e = [ l.cssText, ...r ].join("\n"), s && n.forEach((({placeholder: t, comment: s}) => {
-  e = e.replace(t, s);
+ })(e, t, s, c);
+ return e = [ l.cssText, ...r ].join("\n"), o && n.forEach((({placeholder: t, comment: o}) => {
+  e = e.replace(t, o);
  })), l.slottedSelectors.forEach((t => {
   e = e.replace(t.orgSelector, t.updatedSelector);
  })), e;

package/internal/package.json

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

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

@@ -43,7 +43,7 @@ export interface StencilConfig {
      * However, it's still common to have styles which should be "global" across all components and the website.
      * A global CSS file is often useful to set CSS Variables.
      *
-     * Additonally, the globalStyle config is can be used to precompile styles with Sass, PostCss, etc.
+     * Additonally, the globalStyle config can be used to precompile styles with Sass, PostCss, etc.
      * Below is an example folder structure containing a webapp's global sass file, named app.css.
      */
     globalStyle?: string;

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

@@ -666,7 +666,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -1427,9 +1427,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1550,6 +1548,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;

package/internal/testing/index.js

@@ -228,8 +228,10 @@ const createTime = (e, t = "") => {
  return t.$attrs$ = e.vattrs, t.$children$ = e.vchildren, t.$key$ = e.vkey, t.$name$ = e.vname, 
  t;
 }, validateInputProperties = e => {
- const t = Object.keys(e), a = t.indexOf("type"), o = t.indexOf("min"), s = t.indexOf("max"), n = t.indexOf("min"), l = t.indexOf("value");
- -1 !== l && (l < a || l < o || l < s || l < n) && consoleDevWarn('The "value" prop of <input> should be set after "min", "max", "type" and "step"');
+ const t = Object.keys(e), a = t.indexOf("value");
+ if (-1 === a) return;
+ const o = t.indexOf("type"), s = t.indexOf("min"), n = t.indexOf("max"), l = t.indexOf("step");
+ (a < o || a < s || a < n || a < l) && consoleDevWarn('The "value" prop of <input> should be set after "min", "max", "type" and "step"');
 }, setAccessor = (e, t, a, o, s, n) => {
  if (a !== o) {
   let l = isMemberInElement(e, t), r = t.toLowerCase();
@@ -303,20 +305,20 @@ const createElm = (e, t, a, o) => {
  appData.BUILD.vdomText && null !== l ? appData.BUILD.vdomText && appData.BUILD.slotRelocation && (r = a["s-cr"]) ? r.parentNode.textContent = l : appData.BUILD.vdomText && e.$text$ !== l && (a.data = l) : (appData.BUILD.svg && (isSvgMode = "svg" === n || "foreignObject" !== n && isSvgMode), 
  (appData.BUILD.vdomAttribute || appData.BUILD.reflect) && (appData.BUILD.slot && "slot" === n || updateElement(e, t, isSvgMode)), 
  appData.BUILD.updatable && null !== o && null !== s ? ((e, t, a, o) => {
-  let s, n, l = 0, r = 0, p = 0, i = 0, d = t.length - 1, c = t[0], $ = t[d], m = o.length - 1, u = o[0], h = o[m];
-  for (;l <= d && r <= m; ) if (null == c) c = t[++l]; else if (null == $) $ = t[--d]; else if (null == u) u = o[++r]; else if (null == h) h = o[--m]; else if (isSameVnode(c, u)) patch(c, u), 
-  c = t[++l], u = o[++r]; else if (isSameVnode($, h)) patch($, h), $ = t[--d], h = o[--m]; else if (isSameVnode(c, h)) !appData.BUILD.slotRelocation || "slot" !== c.$tag$ && "slot" !== h.$tag$ || putBackInOriginalLocation(c.$elm$.parentNode, !1), 
-  patch(c, h), e.insertBefore(c.$elm$, $.$elm$.nextSibling), c = t[++l], h = o[--m]; else if (isSameVnode($, u)) !appData.BUILD.slotRelocation || "slot" !== c.$tag$ && "slot" !== h.$tag$ || putBackInOriginalLocation($.$elm$.parentNode, !1), 
-  patch($, u), e.insertBefore($.$elm$, c.$elm$), $ = t[--d], u = o[++r]; else {
-   if (p = -1, appData.BUILD.vdomKey) for (i = l; i <= d; ++i) if (t[i] && null !== t[i].$key$ && t[i].$key$ === u.$key$) {
+  let s, n, l = 0, r = 0, p = 0, i = 0, d = t.length - 1, c = t[0], $ = t[d], u = o.length - 1, m = o[0], h = o[u];
+  for (;l <= d && r <= u; ) if (null == c) c = t[++l]; else if (null == $) $ = t[--d]; else if (null == m) m = o[++r]; else if (null == h) h = o[--u]; else if (isSameVnode(c, m)) patch(c, m), 
+  c = t[++l], m = o[++r]; else if (isSameVnode($, h)) patch($, h), $ = t[--d], h = o[--u]; else if (isSameVnode(c, h)) !appData.BUILD.slotRelocation || "slot" !== c.$tag$ && "slot" !== h.$tag$ || putBackInOriginalLocation(c.$elm$.parentNode, !1), 
+  patch(c, h), e.insertBefore(c.$elm$, $.$elm$.nextSibling), c = t[++l], h = o[--u]; else if (isSameVnode($, m)) !appData.BUILD.slotRelocation || "slot" !== c.$tag$ && "slot" !== h.$tag$ || putBackInOriginalLocation($.$elm$.parentNode, !1), 
+  patch($, m), e.insertBefore($.$elm$, c.$elm$), $ = t[--d], m = o[++r]; else {
+   if (p = -1, appData.BUILD.vdomKey) for (i = l; i <= d; ++i) if (t[i] && null !== t[i].$key$ && t[i].$key$ === m.$key$) {
     p = i;
     break;
    }
-   appData.BUILD.vdomKey && p >= 0 ? (n = t[p], n.$tag$ !== u.$tag$ ? s = createElm(t && t[r], a, p, e) : (patch(n, u), 
-   t[p] = void 0, s = n.$elm$), u = o[++r]) : (s = createElm(t && t[r], a, r, e), u = o[++r]), 
+   appData.BUILD.vdomKey && p >= 0 ? (n = t[p], n.$tag$ !== m.$tag$ ? s = createElm(t && t[r], a, p, e) : (patch(n, m), 
+   t[p] = void 0, s = n.$elm$), m = o[++r]) : (s = createElm(t && t[r], a, r, e), m = o[++r]), 
    s && (appData.BUILD.slotRelocation ? parentReferenceNode(c.$elm$).insertBefore(s, referenceNode(c.$elm$)) : c.$elm$.parentNode.insertBefore(s, c.$elm$));
   }
-  l > d ? addVnodes(e, null == o[m + 1] ? null : o[m + 1].$elm$, a, o, r, m) : appData.BUILD.updatable && r > m && removeVnodes(t, l, d);
+  l > d ? addVnodes(e, null == o[u + 1] ? null : o[u + 1].$elm$, a, o, r, u) : appData.BUILD.updatable && r > u && removeVnodes(t, l, d);
  })(a, o, t, s) : null !== s ? (appData.BUILD.updatable && appData.BUILD.vdomText && null !== e.$text$ && (a.textContent = ""), 
  addVnodes(a, null, t, s, 0, s.length - 1)) : appData.BUILD.updatable && null !== o && removeVnodes(o, 0, o.length - 1), 
  appData.BUILD.svg && isSvgMode && "svg" === n && (isSvgMode = !1));
@@ -923,10 +925,10 @@ exports.addHostEventListeners = addHostEventListeners, exports.bootstrapLazy = (
   }
  })();
  const a = createTime("bootstrapLazy"), o = [], s = t.exclude || [], n = win.customElements, l = doc.head, r = l.querySelector("meta[charset]"), p = doc.createElement("style"), i = [], d = doc.querySelectorAll("[sty-id]");
- let c, $ = !0, m = 0;
+ let c, $ = !0, u = 0;
  if (Object.assign(plt, t), plt.$resourcesUrl$ = new URL(t.resourcesUrl || "./", doc.baseURI).href, 
  appData.BUILD.asyncQueue && t.syncQueue && (plt.$flags$ |= 4), appData.BUILD.hydrateClientSide && (plt.$flags$ |= 2), 
- appData.BUILD.hydrateClientSide && appData.BUILD.shadowDom) for (;m < d.length; m++) registerStyle(d[m].getAttribute("sty-id"), d[m].innerHTML.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{"));
+ appData.BUILD.hydrateClientSide && appData.BUILD.shadowDom) for (;u < d.length; u++) registerStyle(d[u].getAttribute("sty-id"), d[u].innerHTML.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{"));
  e.map((e => {
   e[1].map((a => {
    const l = {

package/internal/testing/package.json

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

package/internal/testing/shadow-css.js

@@ -1,10 +1,10 @@
-const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColonHostRe = new RegExp("(-shadowcsshost" + _parenSuffix, "gim"), _cssColonHostContextRe = new RegExp("(-shadowcsscontext" + _parenSuffix, "gim"), _cssColonSlottedRe = new RegExp("(-shadowcssslotted" + _parenSuffix, "gim"), _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/, _shadowDOMSelectorsRe = [ /::shadow/g, /::content/g ], _polyfillHostRe = /-shadowcsshost/gim, _colonHostRe = /:host/gim, _colonSlottedRe = /::slotted/gim, _colonHostContextRe = /:host-context/gim, _commentRe = /\/\*\s*[\s\S]*?\*\//g, _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g, _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g, _curlyRe = /([{}])/g, processRules = (e, t) => {
- const s = escapeBlocks(e);
- let o = 0;
- return s.escapedString.replace(_ruleRe, ((...e) => {
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColonHostRe = new RegExp("(-shadowcsshost" + _parenSuffix, "gim"), _cssColonHostContextRe = new RegExp("(-shadowcsscontext" + _parenSuffix, "gim"), _cssColonSlottedRe = new RegExp("(-shadowcssslotted" + _parenSuffix, "gim"), _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/, _shadowDOMSelectorsRe = [ /::shadow/g, /::content/g ], _polyfillHostRe = /-shadowcsshost/gim, _colonHostRe = /:host/gim, _colonSlottedRe = /::slotted/gim, _colonHostContextRe = /:host-context/gim, _commentRe = /\/\*\s*[\s\S]*?\*\//g, _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g, _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g, _curlyRe = /([{}])/g, _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/, processRules = (e, t) => {
+ const o = escapeBlocks(e);
+ let s = 0;
+ return o.escapedString.replace(_ruleRe, ((...e) => {
   const c = e[2];
   let r = "", n = e[4], l = "";
-  n && n.startsWith("{%BLOCK%") && (r = s.blocks[o++], n = n.substring("%BLOCK%".length + 1), 
+  n && n.startsWith("{%BLOCK%") && (r = o.blocks[s++], n = n.substring("%BLOCK%".length + 1), 
   l = "{");
   const a = t({
    selector: c,
@@ -13,60 +13,57 @@ const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColo
   return `${e[1]}${a.selector}${e[3]}${l}${a.content}${n}`;
  }));
 }, escapeBlocks = e => {
- const t = e.split(_curlyRe), s = [], o = [];
+ const t = e.split(_curlyRe), o = [], s = [];
  let c = 0, r = [];
  for (let e = 0; e < t.length; e++) {
   const n = t[e];
-  "}" === n && c--, c > 0 ? r.push(n) : (r.length > 0 && (o.push(r.join("")), s.push("%BLOCK%"), 
-  r = []), s.push(n)), "{" === n && c++;
+  "}" === n && c--, c > 0 ? r.push(n) : (r.length > 0 && (s.push(r.join("")), o.push("%BLOCK%"), 
+  r = []), o.push(n)), "{" === n && c++;
  }
- return r.length > 0 && (o.push(r.join("")), s.push("%BLOCK%")), {
-  escapedString: s.join(""),
-  blocks: o
+ return r.length > 0 && (s.push(r.join("")), o.push("%BLOCK%")), {
+  escapedString: o.join(""),
+  blocks: s
  };
-}, convertColonRule = (e, t, s) => e.replace(t, ((...e) => {
+}, convertColonRule = (e, t, o) => e.replace(t, ((...e) => {
  if (e[2]) {
-  const t = e[2].split(","), o = [];
+  const t = e[2].split(","), s = [];
   for (let c = 0; c < t.length; c++) {
    const r = t[c].trim();
    if (!r) break;
-   o.push(s("-shadowcsshost-no-combinator", r, e[3]));
+   s.push(o("-shadowcsshost-no-combinator", r, e[3]));
   }
-  return o.join(",");
+  return s.join(",");
  }
  return "-shadowcsshost-no-combinator" + e[3];
-})), colonHostPartReplacer = (e, t, s) => e + t.replace("-shadowcsshost", "") + s, colonHostContextPartReplacer = (e, t, s) => t.indexOf("-shadowcsshost") > -1 ? colonHostPartReplacer(e, t, s) : e + t + s + ", " + t + " " + e + s, scopeSelectors = (e, t, s, o, c) => processRules(e, (e => {
+})), colonHostPartReplacer = (e, t, o) => e + t.replace("-shadowcsshost", "") + o, colonHostContextPartReplacer = (e, t, o) => t.indexOf("-shadowcsshost") > -1 ? colonHostPartReplacer(e, t, o) : e + t + o + ", " + t + " " + e + o, injectScopingSelector = (e, t) => e.replace(_selectorPartsRe, ((e, o = "", s, c = "", r = "") => o + t + c + r)), scopeSelectors = (e, t, o, s, c) => processRules(e, (e => {
  let c = e.selector, r = e.content;
- return "@" !== e.selector[0] ? c = ((e, t, s, o) => e.split(",").map((e => o && e.indexOf("." + o) > -1 ? e.trim() : ((e, t) => !(e => (e = e.replace(/\[/g, "\\[").replace(/\]/g, "\\]"), 
- new RegExp("^(" + e + ")([>\\s~+[.,{:][\\s\\S]*)?$", "m")))(t).test(e))(e, t) ? ((e, t, s) => {
-  const o = "." + (t = t.replace(/\[is=([^\]]*)\]/g, ((e, ...t) => t[0]))), c = e => {
+ return "@" !== e.selector[0] ? c = ((e, t, o, s) => e.split(",").map((e => s && e.indexOf("." + s) > -1 ? e.trim() : ((e, t) => !(e => (e = e.replace(/\[/g, "\\[").replace(/\]/g, "\\]"), 
+ new RegExp("^(" + e + ")([>\\s~+[.,{:][\\s\\S]*)?$", "m")))(t).test(e))(e, t) ? ((e, t, o) => {
+  const s = "." + (t = t.replace(/\[is=([^\]]*)\]/g, ((e, ...t) => t[0]))), c = e => {
    let c = e.trim();
    if (!c) return "";
-   if (e.indexOf("-shadowcsshost-no-combinator") > -1) c = ((e, t, s) => {
+   if (e.indexOf("-shadowcsshost-no-combinator") > -1) c = ((e, t, o) => {
     if (_polyfillHostRe.lastIndex = 0, _polyfillHostRe.test(e)) {
-     const t = `.${s}`;
-     return e.replace(_polyfillHostNoCombinatorRe, ((e, s) => s.replace(/([^:]*)(:*)(.*)/, ((e, s, o, c) => s + t + o + c)))).replace(_polyfillHostRe, t + " ");
+     const t = `.${o}`;
+     return e.replace(_polyfillHostNoCombinatorRe, ((e, o) => injectScopingSelector(o, t))).replace(_polyfillHostRe, t + " ");
     }
     return t + " " + e;
-   })(e, t, s); else {
+   })(e, t, o); else {
     const t = e.replace(_polyfillHostRe, "");
-    if (t.length > 0) {
-     const e = t.match(/([^:]*)(:*)(.*)/);
-     e && (c = e[1] + o + e[2] + e[3]);
-    }
+    t.length > 0 && (c = injectScopingSelector(t, s));
    }
    return c;
   }, r = (e => {
    const t = [];
-   let s, o = 0;
-   return s = (e = e.replace(/(\[[^\]]*\])/g, ((e, s) => {
-    const c = `__ph-${o}__`;
-    return t.push(s), o++, c;
-   }))).replace(/(:nth-[-\w]+)(\([^)]+\))/g, ((e, s, c) => {
-    const r = `__ph-${o}__`;
-    return t.push(c), o++, s + r;
+   let o, s = 0;
+   return o = (e = e.replace(/(\[[^\]]*\])/g, ((e, o) => {
+    const c = `__ph-${s}__`;
+    return t.push(o), s++, c;
+   }))).replace(/(:nth-[-\w]+)(\([^)]+\))/g, ((e, o, c) => {
+    const r = `__ph-${s}__`;
+    return t.push(c), s++, o + r;
    })), {
-    content: s,
+    content: o,
     placeholders: t
    };
   })(e);
@@ -74,52 +71,52 @@ const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", _cssColo
   const i = /( |>|\+|~(?!=))\s*/g;
   let p = !((e = r.content).indexOf("-shadowcsshost-no-combinator") > -1);
   for (;null !== (n = i.exec(e)); ) {
-   const t = n[1], s = e.slice(a, n.index).trim();
-   p = p || s.indexOf("-shadowcsshost-no-combinator") > -1, l += `${p ? c(s) : s} ${t} `, 
+   const t = n[1], o = e.slice(a, n.index).trim();
+   p = p || o.indexOf("-shadowcsshost-no-combinator") > -1, l += `${p ? c(o) : o} ${t} `, 
    a = i.lastIndex;
   }
   const h = e.substring(a);
   return p = p || h.indexOf("-shadowcsshost-no-combinator") > -1, l += p ? c(h) : h, 
   u = r.placeholders, l.replace(/__ph-(\d+)__/g, ((e, t) => u[+t]));
   var u;
- })(e, t, s).trim() : e.trim())).join(", "))(e.selector, t, s, o) : (e.selector.startsWith("@media") || e.selector.startsWith("@supports") || e.selector.startsWith("@page") || e.selector.startsWith("@document")) && (r = scopeSelectors(e.content, t, s, o)), 
+ })(e, t, o).trim() : e.trim())).join(", "))(e.selector, t, o, s) : (e.selector.startsWith("@media") || e.selector.startsWith("@supports") || e.selector.startsWith("@page") || e.selector.startsWith("@document")) && (r = scopeSelectors(e.content, t, o, s)), 
  {
   selector: c.replace(/\s{2,}/g, " ").trim(),
   content: r
  };
 }));
 
-exports.scopeCss = (e, t, s) => {
- const o = t + "-h", c = t + "-s", r = e.match(_commentWithHashRe) || [];
+exports.scopeCss = (e, t, o) => {
+ const s = t + "-h", c = t + "-s", r = e.match(_commentWithHashRe) || [];
  e = e.replace(_commentRe, "");
  const n = [];
- if (s) {
+ if (o) {
   const t = e => {
-   const t = `/*!@___${n.length}___*/`, s = `/*!@${e.selector}*/`;
+   const t = `/*!@___${n.length}___*/`, o = `/*!@${e.selector}*/`;
    return n.push({
     placeholder: t,
-    comment: s
+    comment: o
    }), e.selector = t + e.selector, e;
   };
   e = processRules(e, (e => "@" !== e.selector[0] ? t(e) : e.selector.startsWith("@media") || e.selector.startsWith("@supports") || e.selector.startsWith("@page") || e.selector.startsWith("@document") ? (e.content = processRules(e.content, t), 
   e) : e));
  }
- const l = ((e, t, s, o, c) => {
+ const l = ((e, t, o, s, c) => {
   const r = ((e, t) => {
-   const s = "." + t + " > ", o = [];
+   const o = "." + t + " > ", s = [];
    return e = e.replace(_cssColonSlottedRe, ((...e) => {
     if (e[2]) {
-     const t = e[2].trim(), c = e[3], r = s + t + c;
+     const t = e[2].trim(), c = e[3], r = o + t + c;
      let n = "";
      for (let t = e[4] - 1; t >= 0; t--) {
-      const s = e[5][t];
-      if ("}" === s || "," === s) break;
-      n = s + n;
+      const o = e[5][t];
+      if ("}" === o || "," === o) break;
+      n = o + n;
      }
      const l = n + r, a = `${n.trimRight()}${r.trim()}`;
      if (l.trim() !== a.trim()) {
       const e = `${a}, ${l}`;
-      o.push({
+      s.push({
        orgSelector: l,
        updatedSelector: e
       });
@@ -128,18 +125,18 @@ exports.scopeCss = (e, t, s) => {
     }
     return "-shadowcsshost-no-combinator" + e[3];
    })), {
-    selectors: o,
+    selectors: s,
     cssText: e
    };
-  })(e = (e => convertColonRule(e, _cssColonHostContextRe, colonHostContextPartReplacer))(e = (e => convertColonRule(e, _cssColonHostRe, colonHostPartReplacer))(e = e.replace(_colonHostContextRe, "-shadowcsscontext").replace(_colonHostRe, "-shadowcsshost").replace(_colonSlottedRe, "-shadowcssslotted"))), o);
+  })(e = (e => convertColonRule(e, _cssColonHostContextRe, colonHostContextPartReplacer))(e = (e => convertColonRule(e, _cssColonHostRe, colonHostPartReplacer))(e = e.replace(_colonHostContextRe, "-shadowcsscontext").replace(_colonHostRe, "-shadowcsshost").replace(_colonSlottedRe, "-shadowcssslotted"))), s);
   return e = (e => _shadowDOMSelectorsRe.reduce(((e, t) => e.replace(t, " ")), e))(e = r.cssText), 
-  t && (e = scopeSelectors(e, t, s, o)), {
-   cssText: (e = (e = e.replace(/-shadowcsshost-no-combinator/g, `.${s}`)).replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ")).trim(),
+  t && (e = scopeSelectors(e, t, o, s)), {
+   cssText: (e = (e = e.replace(/-shadowcsshost-no-combinator/g, `.${o}`)).replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ")).trim(),
    slottedSelectors: r.selectors
   };
- })(e, t, o, c);
- return e = [ l.cssText, ...r ].join("\n"), s && n.forEach((({placeholder: t, comment: s}) => {
-  e = e.replace(t, s);
+ })(e, t, s, c);
+ return e = [ l.cssText, ...r ].join("\n"), o && n.forEach((({placeholder: t, comment: o}) => {
+  e = e.replace(t, o);
  })), l.slottedSelectors.forEach((t => {
   e = e.replace(t.orgSelector, t.updatedSelector);
  })), e;

package/mock-doc/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc (CommonJS) v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc (CommonJS) v2.12.1 | MIT Licensed | https://stenciljs.com
  */
 var mockDoc = (function(exports) {
 'use strict';
@@ -547,7 +547,7 @@ class MockCSSStyleDeclaration {
         const splt = rule.split(':');
         if (splt.length > 1) {
           const prop = splt[0].trim();
-          const value = splt[1].trim();
+          const value = splt.slice(1).join(':').trim();
           if (prop !== '' && value !== '') {
             this._styles.set(jsCaseToCssCase(prop), value);
           }
@@ -1510,6 +1510,9 @@ class MockNode {
     return null;
   }
   contains(otherNode) {
+    if (otherNode === this) {
+      return true;
+    }
     return this.childNodes.includes(otherNode);
   }
   removeChild(childNode) {

package/mock-doc/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v2.12.1 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -544,7 +544,7 @@ class MockCSSStyleDeclaration {
         const splt = rule.split(':');
         if (splt.length > 1) {
           const prop = splt[0].trim();
-          const value = splt[1].trim();
+          const value = splt.slice(1).join(':').trim();
           if (prop !== '' && value !== '') {
             this._styles.set(jsCaseToCssCase(prop), value);
           }
@@ -1507,6 +1507,9 @@ class MockNode {
     return null;
   }
   contains(otherNode) {
+    if (otherNode === this) {
+      return true;
+    }
     return this.childNodes.includes(otherNode);
   }
   removeChild(childNode) {

package/mock-doc/package.json

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