@stencil/core 2.9.0 → 2.12.0

package/internal/client/index.js

@@ -11,7 +11,7 @@ let renderingRef = null;
 let queueCongestion = 0;
 let queuePending = false;
 /*
- Stencil Client Platform v2.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v2.12.0 | MIT Licensed | https://stenciljs.com
  */
 import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';
 const win = typeof window !== 'undefined' ? window : {};
@@ -594,7 +594,6 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
-                            // tslint:disable-next-line: triple-equals
                         }
                         else if (oldValue == null || elm[memberName] != n) {
                             elm[memberName] = n;
@@ -1952,14 +1951,14 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
-                    //  In a webcomponent lifecyle the attributeChangedCallback runs prior to connectedCallback
+                    //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
                     //  ```html
                     //    <my-component some-attribute="some-value"></my-component>
                     //  ```
                     //
-                    //  There is an edge case where a developer sets the attribute inline on a custom element and then programatically
-                    //  changes it before it has been upgraded as shown below:
+                    //  There is an edge case where a developer sets the attribute inline on a custom element and then
+                    //  programmatically changes it before it has been upgraded as shown below:
                     //
                     //  ```html
                     //    <!-- this component has _not_ been upgraded yet -->
@@ -1969,13 +1968,13 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      el = document.querySelector("#test");
                     //      el.someAttribute = "another-value";
                     //      // upgrade component
-                    //      cutsomElements.define('my-component', MyComponent);
+                    //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
                     //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the intial value rather than "another-value"
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
                     //
                     //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
@@ -1989,6 +1988,14 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         newValue = this[propName];
                         delete this[propName];
                     }
+                    else if (prototype.hasOwnProperty(propName) &&
+                        typeof this[propName] === 'number' &&
+                        this[propName] == newValue) {
+                        // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
+                        // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
+                        // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
@@ -2100,7 +2107,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
     const ancestorComponent = hostRef.$ancestorComponent$;
     const schedule = () => scheduleUpdate(hostRef, true);
     if (BUILD.asyncLoading && ancestorComponent && ancestorComponent['s-rc']) {
-        // this is the intial load and this component it has an ancestor component
+        // this is the initial load and this component it has an ancestor component
         // but the ancestor component has NOT fired its will update lifecycle yet
         // so let's just cool our jets and wait for the ancestor to continue first
         // this will get fired off when the ancestor component
@@ -2279,6 +2286,22 @@ const proxyCustomElement = (Cstr, compactMeta) => {
                 originalDisconnectedCallback.call(this);
             }
         },
+        __attachShadow() {
+            if (supportsShadow) {
+                if (BUILD.shadowDelegatesFocus) {
+                    this.attachShadow({
+                        mode: 'open',
+                        delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */),
+                    });
+                }
+                else {
+                    this.attachShadow({ mode: 'open' });
+                }
+            }
+            else {
+                this.shadowRoot = this;
+            }
+        },
     });
     Cstr.is = cmpMeta.$tagName$;
     return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
@@ -2305,14 +2328,6 @@ const forceModeUpdate = (elm) => {
         }
     }
 };
-const attachShadow = (el) => {
-    if (supportsShadow) {
-        el.attachShadow({ mode: 'open' });
-    }
-    else {
-        el.shadowRoot = el;
-    }
-};
 const hmrStart = (elm, cmpMeta, hmrVersionId) => {
     // ¯\_(ツ)_/¯
     const hostRef = getHostRef(elm);
@@ -2542,102 +2557,104 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
         }
     }
-    lazyBundles.map((lazyBundle) => lazyBundle[1].map((compactMeta) => {
-        const cmpMeta = {
-            $flags$: compactMeta[0],
-            $tagName$: compactMeta[1],
-            $members$: compactMeta[2],
-            $listeners$: compactMeta[3],
-        };
-        if (BUILD.member) {
-            cmpMeta.$members$ = compactMeta[2];
-        }
-        if (BUILD.hostListener) {
-            cmpMeta.$listeners$ = compactMeta[3];
-        }
-        if (BUILD.reflect) {
-            cmpMeta.$attrsToReflect$ = [];
-        }
-        if (BUILD.watchCallback) {
-            cmpMeta.$watchers$ = {};
-        }
-        if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
-        }
-        const tagName = BUILD.transformTagName && options.transformTagName
-            ? options.transformTagName(cmpMeta.$tagName$)
-            : cmpMeta.$tagName$;
-        const HostElement = class extends HTMLElement {
-            // StencilLazyHost
-            constructor(self) {
-                // @ts-ignore
-                super(self);
-                self = this;
-                registerHost(self, cmpMeta);
-                if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                    // this component is using shadow dom
-                    // and this browser supports shadow dom
-                    // add the read-only property "shadowRoot" to the host element
-                    // adding the shadow root build conditionals to minimize runtime
-                    if (supportsShadow) {
-                        if (BUILD.shadowDelegatesFocus) {
-                            self.attachShadow({
-                                mode: 'open',
-                                delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */),
-                            });
+    lazyBundles.map((lazyBundle) => {
+        lazyBundle[1].map((compactMeta) => {
+            const cmpMeta = {
+                $flags$: compactMeta[0],
+                $tagName$: compactMeta[1],
+                $members$: compactMeta[2],
+                $listeners$: compactMeta[3],
+            };
+            if (BUILD.member) {
+                cmpMeta.$members$ = compactMeta[2];
+            }
+            if (BUILD.hostListener) {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
+            if (BUILD.reflect) {
+                cmpMeta.$attrsToReflect$ = [];
+            }
+            if (BUILD.watchCallback) {
+                cmpMeta.$watchers$ = {};
+            }
+            if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+            }
+            const tagName = BUILD.transformTagName && options.transformTagName
+                ? options.transformTagName(cmpMeta.$tagName$)
+                : cmpMeta.$tagName$;
+            const HostElement = class extends HTMLElement {
+                // StencilLazyHost
+                constructor(self) {
+                    // @ts-ignore
+                    super(self);
+                    self = this;
+                    registerHost(self, cmpMeta);
+                    if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                        // this component is using shadow dom
+                        // and this browser supports shadow dom
+                        // add the read-only property "shadowRoot" to the host element
+                        // adding the shadow root build conditionals to minimize runtime
+                        if (supportsShadow) {
+                            if (BUILD.shadowDelegatesFocus) {
+                                self.attachShadow({
+                                    mode: 'open',
+                                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */),
+                                });
+                            }
+                            else {
+                                self.attachShadow({ mode: 'open' });
+                            }
                         }
-                        else {
-                            self.attachShadow({ mode: 'open' });
+                        else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) {
+                            self.shadowRoot = self;
                         }
                     }
-                    else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) {
-                        self.shadowRoot = self;
+                    if (BUILD.slotChildNodesFix) {
+                        patchChildSlotNodes(self, cmpMeta);
                     }
                 }
-                if (BUILD.slotChildNodesFix) {
-                    patchChildSlotNodes(self, cmpMeta);
-                }
-            }
-            connectedCallback() {
-                if (appLoadFallback) {
-                    clearTimeout(appLoadFallback);
-                    appLoadFallback = null;
+                connectedCallback() {
+                    if (appLoadFallback) {
+                        clearTimeout(appLoadFallback);
+                        appLoadFallback = null;
+                    }
+                    if (isBootstrapping) {
+                        // connectedCallback will be processed once all components have been registered
+                        deferredConnectedCallbacks.push(this);
+                    }
+                    else {
+                        plt.jmp(() => connectedCallback(this));
+                    }
                 }
-                if (isBootstrapping) {
-                    // connectedCallback will be processed once all components have been registered
-                    deferredConnectedCallbacks.push(this);
+                disconnectedCallback() {
+                    plt.jmp(() => disconnectedCallback(this));
                 }
-                else {
-                    plt.jmp(() => connectedCallback(this));
+                componentOnReady() {
+                    return getHostRef(this).$onReadyPromise$;
                 }
+            };
+            if (BUILD.cloneNodeFix) {
+                patchCloneNode(HostElement.prototype);
             }
-            disconnectedCallback() {
-                plt.jmp(() => disconnectedCallback(this));
+            if (BUILD.appendChildSlotFix) {
+                patchSlotAppendChild(HostElement.prototype);
             }
-            componentOnReady() {
-                return getHostRef(this).$onReadyPromise$;
+            if (BUILD.hotModuleReplacement) {
+                HostElement.prototype['s-hmr'] = function (hmrVersionId) {
+                    hmrStart(this, cmpMeta, hmrVersionId);
+                };
             }
-        };
-        if (BUILD.cloneNodeFix) {
-            patchCloneNode(HostElement.prototype);
-        }
-        if (BUILD.appendChildSlotFix) {
-            patchSlotAppendChild(HostElement.prototype);
-        }
-        if (BUILD.hotModuleReplacement) {
-            HostElement.prototype['s-hmr'] = function (hmrVersionId) {
-                hmrStart(this, cmpMeta, hmrVersionId);
-            };
-        }
-        if (BUILD.scopedSlotTextContentFix) {
-            patchTextContent(HostElement.prototype, cmpMeta);
-        }
-        cmpMeta.$lazyBundleId$ = lazyBundle[0];
-        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
-            cmpTags.push(tagName);
-            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
-        }
-    }));
+            if (BUILD.scopedSlotTextContentFix) {
+                patchTextContent(HostElement.prototype, cmpMeta);
+            }
+            cmpMeta.$lazyBundleId$ = lazyBundle[0];
+            if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+                cmpTags.push(tagName);
+                customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
+            }
+        });
+    });
     if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
@@ -3007,4 +3024,4 @@ const Build = {
     isTesting: BUILD.isTesting ? true : false,
 };
 export { BUILD, Env, NAMESPACE } from '@stencil/core/internal/app-data';
-export { Build, CSS, Context, Fragment, H, H as HTMLElement, Host, STENCIL_DEV_MODE, addHostEventListeners, attachShadow, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setPlatformOptions, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };
+export { Build, CSS, Context, Fragment, H, H as HTMLElement, Host, STENCIL_DEV_MODE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setPlatformOptions, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };

package/internal/client/package.json

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

package/internal/client/patch-browser.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.12.0 | MIT Licensed | https://stenciljs.com
  */
 import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';
 import { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';

package/internal/client/patch-esm.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.12.0 | MIT Licensed | https://stenciljs.com
  */
 import { BUILD } from '@stencil/core/internal/app-data';
 import { CSS, plt, win, promiseResolve } from '@stencil/core';

package/internal/client/shadow-css.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Platform v2.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v2.12.0 | MIT Licensed | https://stenciljs.com
  */
 /**
  * @license
@@ -67,6 +67,7 @@ const extractCommentsWithHash = (input) => {
 };
 const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
 const _curlyRe = /([{}])/g;
+const _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
 const OPEN_CURLY = '{';
 const CLOSE_CURLY = '}';
 const BLOCK_PLACEHOLDER = '%BLOCK%';
@@ -219,17 +220,18 @@ const selectorNeedsScoping = (selector, scopeSelector) => {
     const re = makeScopeMatcher(scopeSelector);
     return !re.test(selector);
 };
+const injectScopingSelector = (selector, scopingSelector) => {
+    return selector.replace(_selectorPartsRe, (_, before = '', _colonGroup, colon = '', after = '') => {
+        return before + scopingSelector + colon + after;
+    });
+};
 const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
     // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
     _polyfillHostRe.lastIndex = 0;
     if (_polyfillHostRe.test(selector)) {
         const replaceBy = `.${hostSelector}`;
         return selector
-            .replace(_polyfillHostNoCombinatorRe, (_, selector) => {
-            return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {
-                return before + replaceBy + colon + after;
-            });
-        })
+            .replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy))
             .replace(_polyfillHostRe, replaceBy + ' ');
     }
     return scopeSelector + ' ' + selector;
@@ -250,10 +252,7 @@ const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
             // remove :host since it should be unnecessary
             const t = p.replace(_polyfillHostRe, '');
             if (t.length > 0) {
-                const matches = t.match(/([^:]*)(:*)(.*)/);
-                if (matches) {
-                    scopedP = matches[1] + className + matches[2] + matches[3];
-                }
+                scopedP = injectScopingSelector(t, className);
             }
         }
         return scopedP;

package/internal/hydrate/index.js

@@ -639,7 +639,8 @@ const callRender = (e, t, o) => {
    s.attributeChangedCallback = function(e, t, n) {
     plt.jmp((() => {
      const t = o.get(e);
-     this.hasOwnProperty(t) && (n = this[t], delete this[t]), this[t] = (null !== n || "boolean" != typeof this[t]) && n;
+     if (this.hasOwnProperty(t)) n = this[t], delete this[t]; else if (s.hasOwnProperty(t) && "number" == typeof this[t] && this[t] == n) return;
+     this[t] = (null !== n || "boolean" != typeof this[t]) && n;
     }));
    }, e.observedAttributes = n.filter((([e, t]) => 15 & t[0])).map((([e, n]) => {
     const s = n[1] || e;
@@ -759,6 +760,9 @@ const callRender = (e, t, o) => {
   },
   disconnectedCallback() {
    disconnectedCallback(this), BUILD.disconnectedCallback && s && s.call(this);
+  },
+  __attachShadow() {
+   this.shadowRoot = this;
   }
  }), e.is = o.$tagName$, proxyComponent(e, o, 3);
 }, forceModeUpdate = e => {
@@ -770,8 +774,6 @@ const callRender = (e, t, o) => {
    attachStyles(o), forceUpdate$1(e));
   }
  }
-}, attachShadow = e => {
- e.shadowRoot = e;
 }, patchCloneNode = e => {
  const t = e.cloneNode;
  e.cloneNode = function(e) {
@@ -906,42 +908,44 @@ const callRender = (e, t, o) => {
  if (Object.assign(plt, t), plt.$resourcesUrl$ = new URL(t.resourcesUrl || "./", doc.baseURI).href, 
  BUILD.asyncQueue && t.syncQueue && (plt.$flags$ |= 4), BUILD.hydrateClientSide && (plt.$flags$ |= 2), 
  BUILD.hydrateClientSide && BUILD.shadowDom) for (;p < c.length; p++) registerStyle(c[p].getAttribute("sty-id"), c[p].innerHTML.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{"));
- e.map((e => e[1].map((o => {
-  const a = {
-   $flags$: o[0],
-   $tagName$: o[1],
-   $members$: o[2],
-   $listeners$: o[3]
-  };
-  BUILD.member && (a.$members$ = o[2]), BUILD.hostListener && (a.$listeners$ = o[3]), 
-  BUILD.reflect && (a.$attrsToReflect$ = []), BUILD.watchCallback && (a.$watchers$ = {}), 
-  BUILD.shadowDom && !supportsShadow && 1 & a.$flags$ && (a.$flags$ |= 8);
-  const r = BUILD.transformTagName && t.transformTagName ? t.transformTagName(a.$tagName$) : a.$tagName$, i = class extends HTMLElement {
-   constructor(e) {
-    super(e), registerHost(e = this, a), BUILD.shadowDom && 1 & a.$flags$ && (BUILD.hydrateServerSide || "shadowRoot" in e || (e.shadowRoot = e)), 
-    BUILD.slotChildNodesFix && patchChildSlotNodes(e, a);
-   }
-   connectedCallback() {
-    $ && (clearTimeout($), $ = null), m ? d.push(this) : plt.jmp((() => connectedCallback(this)));
-   }
-   disconnectedCallback() {
-    plt.jmp((() => disconnectedCallback(this)));
-   }
-   componentOnReady() {
-    return getHostRef(this).$onReadyPromise$;
-   }
-  };
-  BUILD.cloneNodeFix && patchCloneNode(i.prototype), BUILD.appendChildSlotFix && patchSlotAppendChild(i.prototype), 
-  BUILD.hotModuleReplacement && (i.prototype["s-hmr"] = function(e) {
-   ((e, t, o) => {
-    const n = getHostRef(e);
-    n.$flags$ = 1, e["s-hmr-load"] = () => {
-     delete e["s-hmr-load"];
-    }, initializeComponent(e, n, t);
-   })(this, a);
-  }), BUILD.scopedSlotTextContentFix && patchTextContent(i.prototype, a), a.$lazyBundleId$ = e[0], 
-  s.includes(r) || l.get(r) || (n.push(r), l.define(r, proxyComponent(i, a, 1)));
- })))), BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute) && (i.innerHTML = n + "{visibility:hidden}.hydrated{visibility:inherit}", 
+ e.map((e => {
+  e[1].map((o => {
+   const a = {
+    $flags$: o[0],
+    $tagName$: o[1],
+    $members$: o[2],
+    $listeners$: o[3]
+   };
+   BUILD.member && (a.$members$ = o[2]), BUILD.hostListener && (a.$listeners$ = o[3]), 
+   BUILD.reflect && (a.$attrsToReflect$ = []), BUILD.watchCallback && (a.$watchers$ = {}), 
+   BUILD.shadowDom && !supportsShadow && 1 & a.$flags$ && (a.$flags$ |= 8);
+   const r = BUILD.transformTagName && t.transformTagName ? t.transformTagName(a.$tagName$) : a.$tagName$, i = class extends HTMLElement {
+    constructor(e) {
+     super(e), registerHost(e = this, a), BUILD.shadowDom && 1 & a.$flags$ && (BUILD.hydrateServerSide || "shadowRoot" in e || (e.shadowRoot = e)), 
+     BUILD.slotChildNodesFix && patchChildSlotNodes(e, a);
+    }
+    connectedCallback() {
+     $ && (clearTimeout($), $ = null), m ? d.push(this) : plt.jmp((() => connectedCallback(this)));
+    }
+    disconnectedCallback() {
+     plt.jmp((() => disconnectedCallback(this)));
+    }
+    componentOnReady() {
+     return getHostRef(this).$onReadyPromise$;
+    }
+   };
+   BUILD.cloneNodeFix && patchCloneNode(i.prototype), BUILD.appendChildSlotFix && patchSlotAppendChild(i.prototype), 
+   BUILD.hotModuleReplacement && (i.prototype["s-hmr"] = function(e) {
+    ((e, t, o) => {
+     const n = getHostRef(e);
+     n.$flags$ = 1, e["s-hmr-load"] = () => {
+      delete e["s-hmr-load"];
+     }, initializeComponent(e, n, t);
+    })(this, a);
+   }), BUILD.scopedSlotTextContentFix && patchTextContent(i.prototype, a), a.$lazyBundleId$ = e[0], 
+   s.includes(r) || l.get(r) || (n.push(r), l.define(r, proxyComponent(i, a, 1)));
+  }));
+ })), BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute) && (i.innerHTML = n + "{visibility:hidden}.hydrated{visibility:inherit}", 
  i.setAttribute("data-styles", ""), a.insertBefore(i, r ? r.nextSibling : a.firstChild)), 
  m = !1, d.length ? d.map((e => e.connectedCallback())) : BUILD.profile ? plt.jmp((() => $ = setTimeout(appDidLoad, 30, "timeout"))) : plt.jmp((() => $ = setTimeout(appDidLoad, 30))), 
  o();
@@ -1117,4 +1121,4 @@ const cmpModules = new Map, getModule = e => {
  isTesting: !1
 }, styles = new Map, modeResolutionChain = [];
 
-export { Build, Context, Fragment, Host, addHostEventListeners, attachShadow, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate$1 as forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, hAsync as h, hydrateApp, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };
+export { Build, Context, Fragment, Host, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate$1 as forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, hAsync as h, hydrateApp, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };

package/internal/hydrate/package.json

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