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

package/dist/esm/{index-4c30cddd.js → index-5d6a0317.js}

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 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
@@ -975,14 +974,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;
@@ -1388,7 +1417,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
@@ -1523,7 +1557,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
@@ -1632,7 +1666,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);
@@ -1718,7 +1752,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;
@@ -1738,10 +1772,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
@@ -1779,6 +1809,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;
 };
@@ -2267,7 +2312,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
@@ -2314,6 +2360,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;
@@ -2461,6 +2515,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();
@@ -2557,6 +2975,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);
@@ -2569,11 +2995,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) {
@@ -2738,6 +3164,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$: '',
@@ -2819,4 +3247,4 @@ const nextTick = (cb) => promiseResolve().then(cb);
 const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Build as B, Host as H, setPlatformHelpers as a, bootstrapLazy as b, setMode as c, createEvent as d, readTask as e, getElement as f, getMode as g, h, forceUpdate as i, getAssetPath as j, promiseResolve as p, registerInstance as r, setNonce as s, writeTask as w };
+export { Build as B, H, setPlatformHelpers as a, bootstrapLazy as b, setMode as c, createEvent as d, readTask as e, Host as f, getMode as g, h, getElement as i, forceUpdate as j, getAssetPath as k, promiseResolve as p, registerInstance as r, setNonce as s, writeTask as w };

package/dist/esm/{index-348ed70a.js → index-6da05eef.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask, B as Build } from './index-4c30cddd.js';
-import { r as raf } from './helpers-be245865.js';
+import { w as writeTask, B as Build } from './index-5d6a0317.js';
+import { r as raf } from './helpers-f51cf76f.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-7459f819.js');
-const mdTransitionAnimation = () => import('./md.transition-b8224313.js');
+const iosTransitionAnimation = () => import('./ios.transition-fbde96b0.js');
+const mdTransitionAnimation = () => import('./md.transition-76e0020b.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/esm/{index-f3946ac1.js → index-86688780.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers-be245865.js';
+import { c as componentOnReady } from './helpers-f51cf76f.js';
 import { b as printRequiredElementError } from './index-9b0d46f4.js';
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';

package/dist/esm/{index-e1b622e3.js → index-9d7e5d3e.js}

@@ -2,11 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index-a5d50daf.js';
-import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-b410a047.js';
+import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-fb295e3a.js';
 import { p as printIonWarning } from './index-9b0d46f4.js';
-import { c as componentOnReady } from './helpers-be245865.js';
-import { b as getIonMode } from './ionic-global-ad9a1810.js';
-import { c as createAnimation } from './animation-6a0c5338.js';
+import { c as componentOnReady } from './helpers-f51cf76f.js';
+import { b as getIonMode } from './ionic-global-a589c12c.js';
+import { c as createAnimation } from './animation-9a23ed8d.js';
 
 /**
  * baseAnimation

package/dist/esm/index.js

@@ -1,24 +1,24 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-export { c as createAnimation } from './animation-6a0c5338.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-348ed70a.js';
-export { iosTransitionAnimation } from './ios.transition-7459f819.js';
-export { mdTransitionAnimation } from './md.transition-b8224313.js';
+export { c as createAnimation } from './animation-9a23ed8d.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-6da05eef.js';
+export { iosTransitionAnimation } from './ios.transition-fbde96b0.js';
+export { mdTransitionAnimation } from './md.transition-76e0020b.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-fe2083dc.js';
-export { createGesture } from './index-2cf77112.js';
-export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-ad9a1810.js';
-export { c as componentOnReady } from './helpers-be245865.js';
+export { createGesture } from './index-39782642.js';
+export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-a589c12c.js';
+export { c as componentOnReady } from './helpers-f51cf76f.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-49c88215.js';
 export { o as openURL } from './theme-01f3f29c.js';
-export { m as menuController } from './index-e1b622e3.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-19b26885.js';
+export { m as menuController } from './index-9d7e5d3e.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-b1ac1c63.js';
 import './index-a5d50daf.js';
-import './index-4c30cddd.js';
-import './gesture-controller-1bf57181.js';
-import './hardware-back-button-b410a047.js';
+import './index-5d6a0317.js';
+import './gesture-controller-314a54f6.js';
+import './hardware-back-button-fb295e3a.js';
 import './index-9b0d46f4.js';
-import './framework-delegate-ed4ba327.js';
+import './framework-delegate-3fd96df8.js';
 
 const IonicSlides = (opts) => {
     const { swiper, extendParams } = opts;