@stencil/core 2.9.0 → 2.12.0

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/index.js

@@ -1 +1,2 @@
 export * from '@stencil/core/internal/client';
+//# sourceMappingURL=default.js.map

package/internal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal",
-  "version": "2.9.0",
+  "version": "2.12.0",
   "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/testing/index.js

@@ -582,7 +582,8 @@ const callRender = (e, t, a) => {
    s.attributeChangedCallback = function(e, t, o) {
     plt.jmp((() => {
      const t = a.get(e);
-     this.hasOwnProperty(t) && (o = this[t], delete this[t]), this[t] = (null !== o || "boolean" != typeof this[t]) && o;
+     if (this.hasOwnProperty(t)) o = this[t], delete this[t]; else if (s.hasOwnProperty(t) && "number" == typeof this[t] && this[t] == o) return;
+     this[t] = (null !== o || "boolean" != typeof this[t]) && o;
     }));
    }, e.observedAttributes = o.filter((([e, t]) => 15 & t[0])).map((([e, o]) => {
     const s = o[1] || e;
@@ -704,6 +705,14 @@ const callRender = (e, t, a) => {
   },
   disconnectedCallback() {
    disconnectedCallback(this), appData.BUILD.disconnectedCallback && s && s.call(this);
+  },
+  __attachShadow() {
+   exports.supportsShadow ? appData.BUILD.shadowDelegatesFocus ? this.attachShadow({
+    mode: "open",
+    delegatesFocus: !!(16 & a.$flags$)
+   }) : this.attachShadow({
+    mode: "open"
+   }) : this.shadowRoot = this;
   }
  }), e.is = a.$tagName$, proxyComponent(e, a, 3);
 }, patchCloneNode = e => {
@@ -865,11 +874,7 @@ Object.defineProperty(exports, "Env", {
  isServer: !0,
  isTesting: !0
 }, exports.Context = Context, exports.Fragment = (e, t) => t, exports.Host = Host, 
-exports.addHostEventListeners = addHostEventListeners, exports.attachShadow = e => {
- exports.supportsShadow ? e.attachShadow({
-  mode: "open"
- }) : e.shadowRoot = e;
-}, exports.bootstrapLazy = (e, t = {}) => {
+exports.addHostEventListeners = addHostEventListeners, exports.bootstrapLazy = (e, t = {}) => {
  appData.BUILD.profile && performance.mark && performance.mark("st:app:start"), (() => {
   if (appData.BUILD.devTools) {
    const e = win.stencil = win.stencil || {}, t = e.inspect;
@@ -922,47 +927,49 @@ exports.addHostEventListeners = addHostEventListeners, exports.attachShadow = e
  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{"));
- e.map((e => e[1].map((a => {
-  const l = {
-   $flags$: a[0],
-   $tagName$: a[1],
-   $members$: a[2],
-   $listeners$: a[3]
-  };
-  appData.BUILD.member && (l.$members$ = a[2]), appData.BUILD.hostListener && (l.$listeners$ = a[3]), 
-  appData.BUILD.reflect && (l.$attrsToReflect$ = []), appData.BUILD.watchCallback && (l.$watchers$ = {}), 
-  appData.BUILD.shadowDom && !exports.supportsShadow && 1 & l.$flags$ && (l.$flags$ |= 8);
-  const r = appData.BUILD.transformTagName && t.transformTagName ? t.transformTagName(l.$tagName$) : l.$tagName$, p = class extends HTMLElement {
-   constructor(e) {
-    super(e), registerHost(e = this, l), appData.BUILD.shadowDom && 1 & l.$flags$ && (exports.supportsShadow ? appData.BUILD.shadowDelegatesFocus ? e.attachShadow({
-     mode: "open",
-     delegatesFocus: !!(16 & l.$flags$)
-    }) : e.attachShadow({
-     mode: "open"
-    }) : appData.BUILD.hydrateServerSide || "shadowRoot" in e || (e.shadowRoot = e)), 
-    appData.BUILD.slotChildNodesFix && patchChildSlotNodes(e, l);
-   }
-   connectedCallback() {
-    c && (clearTimeout(c), c = null), $ ? i.push(this) : plt.jmp((() => connectedCallback(this)));
-   }
-   disconnectedCallback() {
-    plt.jmp((() => disconnectedCallback(this)));
-   }
-   componentOnReady() {
-    return getHostRef(this).$onReadyPromise$;
-   }
-  };
-  appData.BUILD.cloneNodeFix && patchCloneNode(p.prototype), appData.BUILD.appendChildSlotFix && patchSlotAppendChild(p.prototype), 
-  appData.BUILD.hotModuleReplacement && (p.prototype["s-hmr"] = function(e) {
-   ((e, t, a) => {
-    const o = getHostRef(e);
-    o.$flags$ = 1, e["s-hmr-load"] = () => {
-     delete e["s-hmr-load"];
-    }, initializeComponent(e, o, t);
-   })(this, l);
-  }), appData.BUILD.scopedSlotTextContentFix && patchTextContent(p.prototype, l), 
-  l.$lazyBundleId$ = e[0], s.includes(r) || n.get(r) || (o.push(r), n.define(r, proxyComponent(p, l, 1)));
- })))), appData.BUILD.invisiblePrehydration && (appData.BUILD.hydratedClass || appData.BUILD.hydratedAttribute) && (p.innerHTML = o + "{visibility:hidden}.hydrated{visibility:inherit}", 
+ e.map((e => {
+  e[1].map((a => {
+   const l = {
+    $flags$: a[0],
+    $tagName$: a[1],
+    $members$: a[2],
+    $listeners$: a[3]
+   };
+   appData.BUILD.member && (l.$members$ = a[2]), appData.BUILD.hostListener && (l.$listeners$ = a[3]), 
+   appData.BUILD.reflect && (l.$attrsToReflect$ = []), appData.BUILD.watchCallback && (l.$watchers$ = {}), 
+   appData.BUILD.shadowDom && !exports.supportsShadow && 1 & l.$flags$ && (l.$flags$ |= 8);
+   const r = appData.BUILD.transformTagName && t.transformTagName ? t.transformTagName(l.$tagName$) : l.$tagName$, p = class extends HTMLElement {
+    constructor(e) {
+     super(e), registerHost(e = this, l), appData.BUILD.shadowDom && 1 & l.$flags$ && (exports.supportsShadow ? appData.BUILD.shadowDelegatesFocus ? e.attachShadow({
+      mode: "open",
+      delegatesFocus: !!(16 & l.$flags$)
+     }) : e.attachShadow({
+      mode: "open"
+     }) : appData.BUILD.hydrateServerSide || "shadowRoot" in e || (e.shadowRoot = e)), 
+     appData.BUILD.slotChildNodesFix && patchChildSlotNodes(e, l);
+    }
+    connectedCallback() {
+     c && (clearTimeout(c), c = null), $ ? i.push(this) : plt.jmp((() => connectedCallback(this)));
+    }
+    disconnectedCallback() {
+     plt.jmp((() => disconnectedCallback(this)));
+    }
+    componentOnReady() {
+     return getHostRef(this).$onReadyPromise$;
+    }
+   };
+   appData.BUILD.cloneNodeFix && patchCloneNode(p.prototype), appData.BUILD.appendChildSlotFix && patchSlotAppendChild(p.prototype), 
+   appData.BUILD.hotModuleReplacement && (p.prototype["s-hmr"] = function(e) {
+    ((e, t, a) => {
+     const o = getHostRef(e);
+     o.$flags$ = 1, e["s-hmr-load"] = () => {
+      delete e["s-hmr-load"];
+     }, initializeComponent(e, o, t);
+    })(this, l);
+   }), appData.BUILD.scopedSlotTextContentFix && patchTextContent(p.prototype, l), 
+   l.$lazyBundleId$ = e[0], s.includes(r) || n.get(r) || (o.push(r), n.define(r, proxyComponent(p, l, 1)));
+  }));
+ })), appData.BUILD.invisiblePrehydration && (appData.BUILD.hydratedClass || appData.BUILD.hydratedAttribute) && (p.innerHTML = o + "{visibility:hidden}.hydrated{visibility:inherit}", 
  p.setAttribute("data-styles", ""), l.insertBefore(p, r ? r.nextSibling : l.firstChild)), 
  $ = !1, i.length ? i.map((e => e.connectedCallback())) : appData.BUILD.profile ? plt.jmp((() => c = setTimeout(appDidLoad, 30, "timeout"))) : plt.jmp((() => c = setTimeout(appDidLoad, 30))), 
  a();

package/internal/testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/testing",
-  "version": "2.9.0",
+  "version": "2.12.0",
   "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.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc (CommonJS) v2.12.0 | 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) {