voyager-ionic-core 7.7.3 → 8.0.0-beta.2

package/dist/cjs/{index-0ffe376d.js → index-2d21d526.js}

@@ -24,7 +24,6 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'ionic';
-const BUILD = /* ionic */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -997,14 +996,44 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
                 {
                     // we've got an old slot vnode and the wrapper is being replaced
-                    // so let's move the old slot content back to its original location
-                    putBackInOriginalLocation(oldParentVNode.$elm$, false);
+                    // so let's move the old slot content to the root of the element currently being rendered
+                    relocateToHostRoot(oldParentVNode.$elm$);
                 }
             }
         }
     }
     return elm;
 };
+/**
+ * Relocates all child nodes of an element that were a part of a previous slot relocation
+ * to the root of the Stencil component currently being rendered. This happens when a parent
+ * element of a slot reference node dynamically changes and triggers a re-render. We cannot use
+ * `putBackInOriginalLocation()` because that may relocate nodes to elements that will not be re-rendered
+ * and so they will not be relocated again.
+ *
+ * @param parentElm The element potentially containing relocated nodes.
+ */
+const relocateToHostRoot = (parentElm) => {
+    plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+    const host = parentElm.closest(hostTagName.toLowerCase());
+    if (host != null) {
+        const contentRefNode = Array.from(host.childNodes).find((ref) => ref['s-cr']);
+        const childNodeArray = Array.from(parentElm.childNodes);
+        // If we have a content ref, we need to invert the order of the nodes we're relocating
+        // to preserve the correct order of elements in the DOM on future relocations
+        for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
+            // Only relocate nodes that were slotted in
+            if (childNode['s-sh'] != null) {
+                host.insertBefore(childNode, contentRefNode !== null && contentRefNode !== void 0 ? contentRefNode : null);
+                // Reset so we can correctly move the node around again.
+                childNode['s-sh'] = undefined;
+                // Need to tell the render pipeline to check to relocate slot content again
+                checkSlotRelocate = true;
+            }
+        }
+    }
+    plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+};
 const putBackInOriginalLocation = (parentElm, recursive) => {
     plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
     const oldSlotChildNodes = parentElm.childNodes;
@@ -1410,7 +1439,12 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
             isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
         }
         {
-            if (tag === 'slot' && !useNativeShadowDom) ;
+            if (tag === 'slot' && !useNativeShadowDom) {
+                if (oldVNode.$name$ !== newVNode.$name$) {
+                    newVNode.$elm$['s-sn'] = newVNode.$name$ || '';
+                    relocateToHostRoot(newVNode.$elm$.parentElement);
+                }
+            }
             else {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
@@ -1545,7 +1579,7 @@ const markSlotContentForRelocation = (elm) => {
                 if (!node['s-cn'] &&
                     !node['s-nr'] &&
                     node['s-hn'] !== childNode['s-hn'] &&
-                    (!BUILD.experimentalSlotFixes  )) {
+                    (!node['s-sh'] || node['s-sh'] !== childNode['s-hn'])) {
                     // if `node` is located in the slot that `childNode` refers to (via the
                     // `'s-sn'` property) then we need to relocate it from it's current spot
                     // (under the host element parent) to the right slot location
@@ -1654,7 +1688,7 @@ const nullifyVNodeRefs = (vNode) => {
  * @param isInitialLoad whether or not this is the first call after page load
  */
 const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -1740,7 +1774,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                     // to make sure they get inserted into their new how in the same order they were declared in their original location.
                     //
                     // TODO(STENCIL-914): Remove `experimentalSlotFixes` check
-                    {
+                    if ((insertBeforeNode && insertBeforeNode.nodeType === 1 /* NODE_TYPE.ElementNode */)) {
                         let orgLocationNode = (_a = nodeToRelocate['s-ol']) === null || _a === void 0 ? void 0 : _a.previousSibling;
                         while (orgLocationNode) {
                             let refNode = (_b = orgLocationNode['s-nr']) !== null && _b !== void 0 ? _b : null;
@@ -1760,10 +1794,6 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                         // since that the node to relocate
                         // has a different next sibling or parent relocated
                         if (nodeToRelocate !== insertBeforeNode) {
-                            if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have its hostname set
-                                nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
-                            }
                             // Add it back to the dom but in its new home
                             // If we get to this point and `insertBeforeNode` is `null`, that means
                             // we're just going to append the node as the last child of the parent. Passing
@@ -1801,6 +1831,21 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         // always reset
         relocateNodes.length = 0;
     }
+    // Hide any elements that were projected through, but don't have a slot to go to.
+    // Only an issue if there were no "slots" rendered. Otherwise, nodes are hidden correctly.
+    // This _only_ happens for `scoped` components!
+    if (cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+        for (const childNode of rootVnode.$elm$.childNodes) {
+            if (childNode['s-hn'] !== hostTagName && !childNode['s-sh']) {
+                // Store the initial value of `hidden` so we can reset it later when
+                // moving nodes around.
+                if (isInitialLoad && childNode['s-ih'] == null) {
+                    childNode['s-ih'] = (_e = childNode.hidden) !== null && _e !== void 0 ? _e : false;
+                }
+                childNode.hidden = true;
+            }
+        }
+    }
     // Clear the content ref so we don't create a memory leak
     contentRef = undefined;
 };
@@ -2289,7 +2334,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
         hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
-        {
+        const bundleId = cmpMeta.$lazyBundleId$;
+        if (bundleId) {
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -2336,6 +2382,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
             endNewInstance();
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
+        else {
+            // sync constructor component
+            Cstr = elm.constructor;
+            // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
+            // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
+            // Stencil has completed instantiating the component.
+            customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
+        }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
             let style = Cstr.style;
@@ -2483,6 +2537,370 @@ const disconnectedCallback = async (elm) => {
         }
     }
 };
+const patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => {
+    patchCloneNode(hostElementPrototype);
+    patchSlotAppendChild(hostElementPrototype);
+    patchSlotAppend(hostElementPrototype);
+    patchSlotPrepend(hostElementPrototype);
+    patchSlotInsertAdjacentElement(hostElementPrototype);
+    patchSlotInsertAdjacentHTML(hostElementPrototype);
+    patchSlotInsertAdjacentText(hostElementPrototype);
+    patchTextContent(hostElementPrototype);
+    patchChildSlotNodes(hostElementPrototype, descriptorPrototype);
+    patchSlotRemoveChild(hostElementPrototype);
+};
+const patchCloneNode = (HostElementPrototype) => {
+    const orgCloneNode = HostElementPrototype.cloneNode;
+    HostElementPrototype.cloneNode = function (deep) {
+        const srcNode = this;
+        const isShadowDom = srcNode.shadowRoot && supportsShadow ;
+        const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
+        if (!isShadowDom && deep) {
+            let i = 0;
+            let slotted, nonStencilNode;
+            const stencilPrivates = [
+                's-id',
+                's-cr',
+                's-lr',
+                's-rc',
+                's-sc',
+                's-p',
+                's-cn',
+                's-sr',
+                's-sn',
+                's-hn',
+                's-ol',
+                's-nr',
+                's-si',
+            ];
+            for (; i < srcNode.childNodes.length; i++) {
+                slotted = srcNode.childNodes[i]['s-nr'];
+                nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i][privateField]);
+                if (slotted) {
+                    if (clonedNode.__appendChild) {
+                        clonedNode.__appendChild(slotted.cloneNode(true));
+                    }
+                    else {
+                        clonedNode.appendChild(slotted.cloneNode(true));
+                    }
+                }
+                if (nonStencilNode) {
+                    clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
+/**
+ * Patches the `appendChild` method on a `scoped` Stencil component.
+ * The patch will attempt to find a slot with the same name as the node being appended
+ * and insert it into the slot reference if found. Otherwise, it falls-back to the original
+ * `appendChild` method.
+ *
+ * @param HostElementPrototype The Stencil component to be patched
+ */
+const patchSlotAppendChild = (HostElementPrototype) => {
+    HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+    HostElementPrototype.appendChild = function (newChild) {
+        const slotName = (newChild['s-sn'] = getSlotName(newChild));
+        const slotNode = getHostSlotNode(this.childNodes, slotName);
+        if (slotNode) {
+            const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+            const appendAfter = slotChildNodes[slotChildNodes.length - 1];
+            const insertedNode = appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+            // Check if there is fallback content that should be hidden
+            updateFallbackSlotVisibility(this);
+            // Force a re-render of the host element
+            forceUpdate(this);
+            return insertedNode;
+        }
+        return this.__appendChild(newChild);
+    };
+};
+/**
+ * Patches the `removeChild` method on a `scoped` Stencil component.
+ * This patch attempts to remove the specified node from a slot reference
+ * if the slot exists. Otherwise, it falls-back to the original `removeChild` method.
+ *
+ * @param ElementPrototype The Stencil component to be patched
+ */
+const patchSlotRemoveChild = (ElementPrototype) => {
+    ElementPrototype.__removeChild = ElementPrototype.removeChild;
+    ElementPrototype.removeChild = function (toRemove) {
+        if (toRemove && typeof toRemove['s-sn'] !== 'undefined') {
+            const slotNode = getHostSlotNode(this.childNodes, toRemove['s-sn']);
+            if (slotNode) {
+                // Get all slot content
+                const slotChildNodes = getHostSlotChildNodes(slotNode, toRemove['s-sn']);
+                // See if any of the slotted content matches the node to remove
+                const existingNode = slotChildNodes.find((n) => n === toRemove);
+                if (existingNode) {
+                    existingNode.remove();
+                    // Check if there is fallback content that should be displayed if that
+                    // was the last node in the slot
+                    updateFallbackSlotVisibility(this);
+                    return;
+                }
+            }
+        }
+        return this.__removeChild(toRemove);
+    };
+};
+/**
+ * Patches the `prepend` method for a slotted node inside a scoped component.
+ *
+ * @param HostElementPrototype the `Element` to be patched
+ */
+const patchSlotPrepend = (HostElementPrototype) => {
+    const originalPrepend = HostElementPrototype.prepend;
+    HostElementPrototype.prepend = function (...newChildren) {
+        newChildren.forEach((newChild) => {
+            if (typeof newChild === 'string') {
+                newChild = this.ownerDocument.createTextNode(newChild);
+            }
+            const slotName = (newChild['s-sn'] = getSlotName(newChild));
+            const slotNode = getHostSlotNode(this.childNodes, slotName);
+            if (slotNode) {
+                const slotPlaceholder = document.createTextNode('');
+                slotPlaceholder['s-nr'] = newChild;
+                slotNode['s-cr'].parentNode.__appendChild(slotPlaceholder);
+                newChild['s-ol'] = slotPlaceholder;
+                const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+                const appendAfter = slotChildNodes[0];
+                return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+            }
+            if (newChild.nodeType === 1 && !!newChild.getAttribute('slot')) {
+                newChild.hidden = true;
+            }
+            return originalPrepend.call(this, newChild);
+        });
+    };
+};
+/**
+ * Patches the `append` method for a slotted node inside a scoped component. The patched method uses
+ * `appendChild` under-the-hood while creating text nodes for any new children that passed as bare strings.
+ *
+ * @param HostElementPrototype the `Element` to be patched
+ */
+const patchSlotAppend = (HostElementPrototype) => {
+    HostElementPrototype.append = function (...newChildren) {
+        newChildren.forEach((newChild) => {
+            if (typeof newChild === 'string') {
+                newChild = this.ownerDocument.createTextNode(newChild);
+            }
+            this.appendChild(newChild);
+        });
+    };
+};
+/**
+ * Patches the `insertAdjacentHTML` method for a slotted node inside a scoped component. Specifically,
+ * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element
+ * gets inserted into the DOM in the correct location.
+ *
+ * @param HostElementPrototype the `Element` to be patched
+ */
+const patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
+    const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;
+    HostElementPrototype.insertAdjacentHTML = function (position, text) {
+        if (position !== 'afterbegin' && position !== 'beforeend') {
+            return originalInsertAdjacentHtml.call(this, position, text);
+        }
+        const container = this.ownerDocument.createElement('_');
+        let node;
+        container.innerHTML = text;
+        if (position === 'afterbegin') {
+            while ((node = container.firstChild)) {
+                this.prepend(node);
+            }
+        }
+        else if (position === 'beforeend') {
+            while ((node = container.firstChild)) {
+                this.append(node);
+            }
+        }
+    };
+};
+/**
+ * Patches the `insertAdjacentText` method for a slotted node inside a scoped component. Specifically,
+ * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the text node
+ * gets inserted into the DOM in the correct location.
+ *
+ * @param HostElementPrototype the `Element` to be patched
+ */
+const patchSlotInsertAdjacentText = (HostElementPrototype) => {
+    HostElementPrototype.insertAdjacentText = function (position, text) {
+        this.insertAdjacentHTML(position, text);
+    };
+};
+/**
+ * Patches the `insertAdjacentElement` method for a slotted node inside a scoped component. Specifically,
+ * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element
+ * gets inserted into the DOM in the correct location.
+ *
+ * @param HostElementPrototype the `Element` to be patched
+ */
+const patchSlotInsertAdjacentElement = (HostElementPrototype) => {
+    const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;
+    HostElementPrototype.insertAdjacentElement = function (position, element) {
+        if (position !== 'afterbegin' && position !== 'beforeend') {
+            return originalInsertAdjacentElement.call(this, position, element);
+        }
+        if (position === 'afterbegin') {
+            this.prepend(element);
+            return element;
+        }
+        else if (position === 'beforeend') {
+            this.append(element);
+            return element;
+        }
+        return element;
+    };
+};
+/**
+ * Patches the text content of an unnamed slotted node inside a scoped component
+ * @param hostElementPrototype the `Element` to be patched
+ */
+const patchTextContent = (hostElementPrototype) => {
+    const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
+    Object.defineProperty(hostElementPrototype, '__textContent', descriptor);
+    {
+        // Patch `textContent` to mimic shadow root behavior
+        Object.defineProperty(hostElementPrototype, 'textContent', {
+            // To mimic shadow root behavior, we need to return the text content of all
+            // nodes in a slot reference node
+            get() {
+                const slotRefNodes = getAllChildSlotNodes(this.childNodes);
+                const textContent = slotRefNodes
+                    .map((node) => {
+                    var _a, _b;
+                    const text = [];
+                    // Need to get the text content of all nodes in the slot reference node
+                    let slotContent = node.nextSibling;
+                    while (slotContent && slotContent['s-sn'] === node['s-sn']) {
+                        if (slotContent.nodeType === 3 /* NODE_TYPES.TEXT_NODE */ || slotContent.nodeType === 1 /* NODE_TYPES.ELEMENT_NODE */) {
+                            text.push((_b = (_a = slotContent.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '');
+                        }
+                        slotContent = slotContent.nextSibling;
+                    }
+                    return text.filter((ref) => ref !== '').join(' ');
+                })
+                    .filter((text) => text !== '')
+                    .join(' ');
+                // Pad the string to return
+                return ' ' + textContent + ' ';
+            },
+            // To mimic shadow root behavior, we need to overwrite all nodes in a slot
+            // reference node. If a default slot reference node exists, the text content will be
+            // placed there. Otherwise, the new text node will be hidden
+            set(value) {
+                const slotRefNodes = getAllChildSlotNodes(this.childNodes);
+                slotRefNodes.forEach((node) => {
+                    // Remove the existing content of the slot
+                    let slotContent = node.nextSibling;
+                    while (slotContent && slotContent['s-sn'] === node['s-sn']) {
+                        const tmp = slotContent;
+                        slotContent = slotContent.nextSibling;
+                        tmp.remove();
+                    }
+                    // If this is a default slot, add the text node in the slot location.
+                    // Otherwise, destroy the slot reference node
+                    if (node['s-sn'] === '') {
+                        const textNode = this.ownerDocument.createTextNode(value);
+                        textNode['s-sn'] = '';
+                        node.parentElement.insertBefore(textNode, node.nextSibling);
+                    }
+                    else {
+                        node.remove();
+                    }
+                });
+            },
+        });
+    }
+};
+const patchChildSlotNodes = (elm, cmpMeta) => {
+    class FakeNodeList extends Array {
+        item(n) {
+            return this[n];
+        }
+    }
+    // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+    if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
+        const childNodesFn = elm.__lookupGetter__('childNodes');
+        Object.defineProperty(elm, 'children', {
+            get() {
+                return this.childNodes.map((n) => n.nodeType === 1);
+            },
+        });
+        Object.defineProperty(elm, 'childElementCount', {
+            get() {
+                return elm.children.length;
+            },
+        });
+        Object.defineProperty(elm, 'childNodes', {
+            get() {
+                const childNodes = childNodesFn.call(this);
+                if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0 &&
+                    getHostRef(this).$flags$ & 2 /* HOST_FLAGS.hasRendered */) {
+                    const result = new FakeNodeList();
+                    for (let i = 0; i < childNodes.length; i++) {
+                        const slot = childNodes[i]['s-nr'];
+                        if (slot) {
+                            result.push(slot);
+                        }
+                    }
+                    return result;
+                }
+                return FakeNodeList.from(childNodes);
+            },
+        });
+    }
+};
+/**
+ * Recursively finds all slot reference nodes ('s-sr') in a series of child nodes.
+ *
+ * @param childNodes The set of child nodes to search for slot reference nodes.
+ * @returns An array of slot reference nodes.
+ */
+const getAllChildSlotNodes = (childNodes) => {
+    const slotRefNodes = [];
+    for (const childNode of Array.from(childNodes)) {
+        if (childNode['s-sr']) {
+            slotRefNodes.push(childNode);
+        }
+        slotRefNodes.push(...getAllChildSlotNodes(childNode.childNodes));
+    }
+    return slotRefNodes;
+};
+const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
+/**
+ * Recursively searches a series of child nodes for a slot with the provided name.
+ * @param childNodes the nodes to search for a slot with a specific name.
+ * @param slotName the name of the slot to match on.
+ * @returns a reference to the slot node that matches the provided name, `null` otherwise
+ */
+const getHostSlotNode = (childNodes, slotName) => {
+    let i = 0;
+    let childNode;
+    for (; i < childNodes.length; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
+            return childNode;
+        }
+        childNode = getHostSlotNode(childNode.childNodes, slotName);
+        if (childNode) {
+            return childNode;
+        }
+    }
+    return null;
+};
+const getHostSlotChildNodes = (n, slotName) => {
+    const childNodes = [n];
+    while ((n = n.nextSibling) && n['s-sn'] === slotName) {
+        childNodes.push(n);
+    }
+    return childNodes;
+};
 const bootstrapLazy = (lazyBundles, options = {}) => {
     var _a;
     const endBootstrap = createTime();
@@ -2579,6 +2997,14 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     return getHostRef(this).$onReadyPromise$;
                 }
             };
+            // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check
+            {
+                // This check is intentionally not combined with the surrounding `experimentalSlotFixes` check
+                // since, moving forward, we only want to patch the pseudo shadow DOM when the component is scoped
+                if (cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+                    patchPseudoShadowDom(HostElement.prototype, cmpMeta);
+                }
+            }
             cmpMeta.$lazyBundleId$ = lazyBundle[0];
             if (!exclude.includes(tagName) && !customElements.get(tagName)) {
                 cmpTags.push(tagName);
@@ -2591,11 +3017,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     if (cmpTags.length > 0) {
         // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
         if (hasSlotRelocation) {
-            dataStyles.innerHTML += SLOT_FB_CSS;
+            dataStyles.textContent += SLOT_FB_CSS;
         }
         // Add hydration styles
         {
-            dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+            dataStyles.textContent += cmpTags + HYDRATED_CSS;
         }
         // If we have styles, add them to the DOM
         if (dataStyles.innerHTML.length) {
@@ -2760,6 +3186,8 @@ const styles = /*@__PURE__*/ new Map();
 const modeResolutionChain = [];
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
+const H = (win.HTMLElement || class {
+});
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
@@ -2842,6 +3270,7 @@ const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.Build = Build;
+exports.H = H;
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;

package/dist/cjs/{index-4c96691f.js → index-ba7ba0af.js}

@@ -4,11 +4,11 @@
 'use strict';
 
 const index$1 = require('./index-c8d52405.js');
-const hardwareBackButton = require('./hardware-back-button-2696acaf.js');
+const hardwareBackButton = require('./hardware-back-button-1c67a5a2.js');
 const index = require('./index-5915f9b3.js');
-const helpers = require('./helpers-da4c0ed1.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
-const animation = require('./animation-c2840aea.js');
+const helpers = require('./helpers-668b3d95.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
+const animation = require('./animation-3e7bb91e.js');
 
 /**
  * baseAnimation

package/dist/cjs/{index-bef98850.js → index-c49cb371.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-da4c0ed1.js');
+const helpers = require('./helpers-668b3d95.js');
 const index = require('./index-5915f9b3.js');
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';

package/dist/cjs/{index-9bfcb6e8.js → index-e4b6c97e.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-const index = require('./index-0ffe376d.js');
-const helpers = require('./helpers-da4c0ed1.js');
+const index = require('./index-2d21d526.js');
+const helpers = require('./helpers-668b3d95.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -12,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-96679580.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-d6c98822.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-3e119901.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-c1392f92.js'); });
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/cjs/{index-d1b59ffa.js → index-ee07ed59.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const gestureController = require('./gesture-controller-c40c045a.js');
+const gestureController = require('./gesture-controller-9436f482.js');
 
 const addEventListener = (el, // TODO(FW-2832): type
 eventName, callback, opts) => {

package/dist/cjs/index.cjs.js

@@ -5,24 +5,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const animation = require('./animation-c2840aea.js');
-const index = require('./index-9bfcb6e8.js');
-const ios_transition = require('./ios.transition-96679580.js');
-const md_transition = require('./md.transition-d6c98822.js');
+const animation = require('./animation-3e7bb91e.js');
+const index = require('./index-e4b6c97e.js');
+const ios_transition = require('./ios.transition-3e119901.js');
+const md_transition = require('./md.transition-c1392f92.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
-const index$1 = require('./index-d1b59ffa.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
-const helpers = require('./helpers-da4c0ed1.js');
+const index$1 = require('./index-ee07ed59.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
+const helpers = require('./helpers-668b3d95.js');
 const config = require('./config-4f60b98a.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-4c96691f.js');
-const overlays = require('./overlays-db5d96f3.js');
+const index$2 = require('./index-ba7ba0af.js');
+const overlays = require('./overlays-44b8d0e0.js');
 require('./index-c8d52405.js');
-require('./index-0ffe376d.js');
-require('./gesture-controller-c40c045a.js');
-require('./hardware-back-button-2696acaf.js');
+require('./index-2d21d526.js');
+require('./gesture-controller-9436f482.js');
+require('./hardware-back-button-1c67a5a2.js');
 require('./index-5915f9b3.js');
-require('./framework-delegate-e0e13baa.js');
+require('./framework-delegate-0499d444.js');
 
 const IonicSlides = (opts) => {
     const { swiper, extendParams } = opts;