@nanoporetech-digital/components 3.7.0 → 3.8.0

package/dist/esm/{index-3c280603.js → index-44c85cc8.js}

@@ -44,7 +44,15 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
+const CONTENT_REF_ID = 'r';
+const ORG_LOCATION_ID = 'o';
+const SLOT_NODE_ID = 's';
+const TEXT_NODE_ID = 't';
+const HYDRATE_ID = 's-id';
+const HYDRATED_STYLE_ID = 'sty-id';
+const HYDRATE_CHILD_ID = 'c-id';
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const HYDRATED_SLOT_FALLBACK_ID = 'sf-id';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
  * Default style mode id
@@ -60,6 +68,18 @@ const isComplexType = (o) => {
     o = typeof o;
     return o === 'object' || o === 'function';
 };
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+function queryNonceMetaTagContent(doc) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
+}
 /**
  * Production h() function based on Preact by
  * Jason Miller (@developit)
@@ -68,7 +88,6 @@ const isComplexType = (o) => {
  *
  * Modified for Stencil's compiler and vdom
  */
-// const stack: any[] = [];
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
@@ -159,6 +178,13 @@ const newVNode = (tag, text) => {
 };
 const Host = {};
 const isHost = (node) => node && node.$tag$ === Host;
+/**
+ * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
+ *
+ * Note that these functions convert from {@link d.VNode} to
+ * {@link d.ChildNode} to give functional component developers a friendly
+ * interface.
+ */
 const vdomFnUtils = {
     forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
     map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
@@ -190,394 +216,202 @@ const convertToPrivate = (node) => {
     return vnode;
 };
 /**
- * Parse a new property value for a given property type.
- *
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
- *   1. `any`, the type given to `propValue` in the function signature
- *   2. the type stored from `propType`.
- *
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
- *
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
- * ```tsx
- * <my-cmp prop-val={0}></my-cmp>
- * ```
- *
- * HTML prop values on the other hand, will always a string
- *
- * @param propValue the new value to coerce to some type
- * @param propType the type of the prop, expressed as a binary number
- * @returns the parsed/coerced value
+ * Show or hide a slot nodes children
+ * @param slotNode a slot node, the 'children' of which should be shown or hidden
+ * @param hide whether to hide the slot node 'children'
+ * @returns
  */
-const parsePropertyValue = (propValue, propType) => {
-    // ensure this value is of the correct prop type
-    if (propValue != null && !isComplexType(propValue)) {
-        if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
-            // per the HTML spec, any string value means it is a boolean true value
-            // but we'll cheat here and say that the string "false" is the boolean false
-            return propValue === 'false' ? false : propValue === '' || !!propValue;
+const renderSlotFallbackContent = (slotNode, hide) => {
+    // if this slot doesn't have fallback content, return
+    if (!slotNode['s-hsf'])
+        return;
+    // in non-shadow component, slot nodes are just empty text nodes or comment nodes
+    // the 'children' nodes are therefore placed next to it.
+    // let's loop through those now
+    let childNodes = (slotNode.parentNode.__childNodes ||
+        slotNode.parentNode.childNodes);
+    let childNode;
+    const childNodesLen = childNodes.length;
+    let i = 0;
+    for (i; i < childNodesLen; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && hide && childNode['s-psn'] === slotNode['s-sn']) {
+            // if this child node is a nested slot
+            // drill into it's children to hide them in-turn
+            renderSlotFallbackContent(childNode, true);
+            continue;
         }
-        if (propType & 2 /* MEMBER_FLAGS.Number */) {
-            // force it to be a number
-            return parseFloat(propValue);
+        // this child node doesn't relate to this slot?
+        if (childNode['s-sn'] !== slotNode['s-sn'])
+            continue;
+        if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */ && childNode['s-sf']) {
+            // we found an fallback element. Hide or show
+            childNode.hidden = hide;
+            childNode.style.display = hide ? 'none' : '';
         }
-        if (propType & 1 /* MEMBER_FLAGS.String */) {
-            // could have been passed as a number or boolean
-            // but we still want it as a string
-            return String(propValue);
+        else if (!!childNode['s-sfc']) {
+            // this child has fallback text. Add or remove it
+            if (hide) {
+                childNode['s-sfc'] = childNode.textContent || undefined;
+                childNode.textContent = '';
+            }
+            else if (!childNode.textContent || childNode.textContent.trim() === '') {
+                childNode.textContent = childNode['s-sfc'];
+            }
         }
-        // redundant return here for better minification
-        return propValue;
     }
-    // not sure exactly what type we want
-    // so no need to change to a different type
-    return propValue;
-};
-const getElement = (ref) => (getHostRef(ref).$hostElement$ );
-const createEvent = (ref, name, flags) => {
-    const elm = getElement(ref);
-    return {
-        emit: (detail) => {
-            return emitEvent(elm, name, {
-                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
-                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
-                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
-                detail,
-            });
-        },
-    };
 };
 /**
- * Helper function to create & dispatch a custom Event on a provided target
- * @param elm the target of the Event
- * @param name the name to give the custom Event
- * @param opts options for configuring a custom Event
- * @returns the custom Event
+ * Function applied to non-shadow component nodes to mimic native shadowDom behaviour:
+ * - When slotted node/s are not present, show `<slot>` node children
+ * - When slotted node/s *are* present, hide `<slot>` node children
+ * @param node an entry whose children to iterate over
  */
-const emitEvent = (elm, name, opts) => {
-    const ev = plt.ce(name, opts);
-    elm.dispatchEvent(ev);
-    return ev;
-};
-const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
-const registerStyle = (scopeId, cssText, allowCS) => {
-    let style = styles.get(scopeId);
-    if (supportsConstructableStylesheets && allowCS) {
-        style = (style || new CSSStyleSheet());
-        if (typeof style === 'string') {
-            style = cssText;
-        }
-        else {
-            style.replaceSync(cssText);
-        }
-    }
-    else {
-        style = cssText;
-    }
-    styles.set(scopeId, style);
-};
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
-    let scopeId = getScopeId(cmpMeta);
-    const style = styles.get(scopeId);
-    // if an element is NOT connected then getRootNode() will return the wrong root node
-    // so the fallback is to always use the document for the root node in those cases
-    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
-    if (style) {
-        if (typeof style === 'string') {
-            styleContainerNode = styleContainerNode.head || styleContainerNode;
-            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-            let styleElm;
-            if (!appliedStyles) {
-                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
-            }
-            if (!appliedStyles.has(scopeId)) {
-                {
-                    {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
+const updateFallbackSlotVisibility = (node) => {
+    const childNodes = node.__childNodes || node.childNodes;
+    let slotNode;
+    let i;
+    let ilen;
+    let j;
+    let slotNameAttr;
+    let nodeType;
+    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
+        // slot reference node?
+        if (childNodes[i]['s-sr']) {
+            // this component uses slots and we're on a slot node
+            // let's find all it's slotted children or lack thereof
+            // and show or hide fallback nodes (`<slot />` children)
+            // get the slot name for this slot reference node
+            slotNameAttr = childNodes[i]['s-sn'];
+            slotNode = childNodes[i];
+            // by default always show a fallback slot node
+            // then hide it if there are other slotted nodes in the light dom
+            renderSlotFallbackContent(slotNode, false);
+            // because we found a slot fallback node let's loop over all
+            // the children again to
+            for (j = 0; j < ilen; j++) {
+                nodeType = childNodes[j].nodeType;
+                // ignore slot fallback nodes
+                if (childNodes[j]['s-sf'])
+                    continue;
+                // is sibling node is from a different component OR is a named fallback slot node?
+                if (childNodes[j]['s-hn'] !== slotNode['s-hn'] || slotNameAttr !== '') {
+                    // you can't slot a textNode in a named slot
+                    if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j]['s-sn']) {
+                        // we found a slotted element!
+                        // let's hide all the fallback nodes
+                        renderSlotFallbackContent(slotNode, true);
+                        // patches this node's removal methods
+                        // so if it gets removed in the future
+                        // re-asses the fallback node status
+                        patchRemove(childNodes[j]);
+                        break;
                     }
-                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
-                if (appliedStyles) {
-                    appliedStyles.add(scopeId);
+                else if (childNodes[j]['s-sn'] === slotNameAttr) {
+                    // this is a default fallback slot node
+                    // any element or text node (with content)
+                    // should hide the default fallback slot node
+                    if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
+                        (nodeType === 3 /* NODE_TYPE.TextNode */ &&
+                            childNodes[j] &&
+                            childNodes[j].textContent &&
+                            childNodes[j].textContent.trim() !== '')) {
+                        // we found a slotted something
+                        // let's hide all the fallback nodes
+                        renderSlotFallbackContent(slotNode, true);
+                        // patches this node's removal methods
+                        // so if it gets removed in the future
+                        // re-asses the fallback node status
+                        patchRemove(childNodes[j]);
+                        break;
+                    }
                 }
             }
         }
-        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-        }
+        // keep drilling down
+        updateFallbackSlotVisibility(childNodes[i]);
     }
-    return scopeId;
 };
-const attachStyles = (hostRef) => {
-    const cmpMeta = hostRef.$cmpMeta$;
-    const elm = hostRef.$hostElement$;
-    const flags = cmpMeta.$flags$;
-    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
-    if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
-        // only required when we're NOT using native shadow dom (slot)
-        // or this browser doesn't support native shadow dom
-        // and this host element was NOT created with SSR
-        // let's pick out the inner content for slot projection
-        // create a node to represent where the original
-        // content was first placed, which is useful later on
-        // DOM WRITE!!
-        elm['s-sc'] = scopeId;
-        elm.classList.add(scopeId + '-h');
-        if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
-            elm.classList.add(scopeId + '-s');
-        }
-    }
-    endAttachStyles();
+const patchPseudoShadowDom = (HostElementPrototype) => {
+    patchChildNodes(HostElementPrototype);
+    patchInsertBefore(HostElementPrototype);
+    patchAppendChild(HostElementPrototype);
+    patchAppend(HostElementPrototype);
+    patchPrepend(HostElementPrototype);
+    patchInsertAdjacentHTML(HostElementPrototype);
+    patchInsertAdjacentText(HostElementPrototype);
+    patchInsertAdjacentElement(HostElementPrototype);
+    patchReplaceChildren(HostElementPrototype);
+    patchInnerHTML(HostElementPrototype);
+    patchInnerText(HostElementPrototype);
+    patchTextContent(HostElementPrototype);
 };
-const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
+////// non-shadow host component patches
 /**
- * Production setAccessor() function based on Preact by
- * Jason Miller (@developit)
- * Licensed under the MIT License
- * https://github.com/developit/preact/blob/master/LICENSE
- *
- * Modified for Stencil's compiler and vdom
+ * Patch `cloneNode()` for non-shadow components ()
+ * @param HostElementPrototype the host prototype to polyfill
  */
-const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-    if (oldValue !== newValue) {
-        let isProp = isMemberInElement(elm, memberName);
-        let ln = memberName.toLowerCase();
-        if (memberName === 'class') {
-            const classList = elm.classList;
-            const oldClasses = parseClassList(oldValue);
-            const newClasses = parseClassList(newValue);
-            classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-            classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-        }
-        else if (memberName === 'style') {
-            // update style attribute, css properties and values
-            {
-                for (const prop in oldValue) {
-                    if (!newValue || newValue[prop] == null) {
-                        if (prop.includes('-')) {
-                            elm.style.removeProperty(prop);
-                        }
-                        else {
-                            elm.style[prop] = '';
-                        }
-                    }
+const patchCloneNode = (HostElementPrototype) => {
+    HostElementPrototype.__cloneNode = HostElementPrototype.cloneNode;
+    HostElementPrototype.cloneNode = function (deep) {
+        const srcNode = this;
+        const clonedNode = HostElementPrototype.__cloneNode.call(srcNode, false);
+        if (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',
+                's-sf',
+                's-sfc',
+                's-hsf',
+            ];
+            for (; i < srcNode.__childNodes.length; i++) {
+                slotted = srcNode.__childNodes[i]['s-nr'];
+                nonStencilNode = stencilPrivates.every((privateField) => !srcNode.__childNodes[i][privateField]);
+                if (slotted) {
+                    clonedNode.__appendChild(slotted.cloneNode(true));
                 }
-            }
-            for (const prop in newValue) {
-                if (!oldValue || newValue[prop] !== oldValue[prop]) {
-                    if (prop.includes('-')) {
-                        elm.style.setProperty(prop, newValue[prop]);
-                    }
-                    else {
-                        elm.style[prop] = newValue[prop];
-                    }
-                }
-            }
-        }
-        else if (memberName === 'key')
-            ;
-        else if (memberName === 'ref') {
-            // minifier will clean this up
-            if (newValue) {
-                newValue(elm);
-            }
-        }
-        else if ((!isProp ) &&
-            memberName[0] === 'o' &&
-            memberName[1] === 'n') {
-            // Event Handlers
-            // so if the member name starts with "on" and the 3rd characters is
-            // a capital letter, and it's not already a member on the element,
-            // then we're assuming it's an event listener
-            if (memberName[2] === '-') {
-                // on- prefixed events
-                // allows to be explicit about the dom event to listen without any magic
-                // under the hood:
-                // <my-cmp on-click> // listens for "click"
-                // <my-cmp on-Click> // listens for "Click"
-                // <my-cmp on-ionChange> // listens for "ionChange"
-                // <my-cmp on-EVENTS> // listens for "EVENTS"
-                memberName = memberName.slice(3);
-            }
-            else if (isMemberInElement(win, ln)) {
-                // standard event
-                // the JSX attribute could have been "onMouseOver" and the
-                // member name "onmouseover" is on the window's prototype
-                // so let's add the listener "mouseover", which is all lowercased
-                memberName = ln.slice(2);
-            }
-            else {
-                // custom event
-                // the JSX attribute could have been "onMyCustomEvent"
-                // so let's trim off the "on" prefix and lowercase the first character
-                // and add the listener "myCustomEvent"
-                // except for the first character, we keep the event name case
-                memberName = ln[2] + memberName.slice(3);
-            }
-            if (oldValue) {
-                plt.rel(elm, memberName, oldValue, false);
-            }
-            if (newValue) {
-                plt.ael(elm, memberName, newValue, false);
-            }
-        }
-        else {
-            // Set property if it exists and it's not a SVG
-            const isComplex = isComplexType(newValue);
-            if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
-                try {
-                    if (!elm.tagName.includes('-')) {
-                        const n = newValue == null ? '' : newValue;
-                        // Workaround for Safari, moving the <input> caret when re-assigning the same valued
-                        if (memberName === 'list') {
-                            isProp = false;
-                        }
-                        else if (oldValue == null || elm[memberName] != n) {
-                            elm[memberName] = n;
-                        }
-                    }
-                    else {
-                        elm[memberName] = newValue;
-                    }
-                }
-                catch (e) { }
-            }
-            /**
-             * Need to manually update attribute if:
-             * - memberName is not an attribute
-             * - if we are rendering the host element in order to reflect attribute
-             * - if it's a SVG, since properties might not work in <svg>
-             * - if the newValue is null/undefined or 'false'.
-             */
-            let xlink = false;
-            {
-                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
-                    memberName = ln;
-                    xlink = true;
-                }
-            }
-            if (newValue == null || newValue === false) {
-                if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    if (xlink) {
-                        elm.removeAttributeNS(XLINK_NS, memberName);
-                    }
-                    else {
-                        elm.removeAttribute(memberName);
-                    }
-                }
-            }
-            else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
-                newValue = newValue === true ? '' : newValue;
-                if (xlink) {
-                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
-                }
-                else {
-                    elm.setAttribute(memberName, newValue);
-                }
-            }
-        }
-    }
-};
-const parseClassListRegex = /\s/;
-const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
-const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
-    // if the element passed in is a shadow root, which is a document fragment
-    // then we want to be adding attrs/props to the shadow root's "host" element
-    // if it's not a shadow root, then we add attrs/props to the same element
-    const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
-        ? newVnode.$elm$.host
-        : newVnode.$elm$;
-    const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
-    const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-    {
-        // remove attributes no longer present on the vnode by setting them to undefined
-        for (memberName in oldVnodeAttrs) {
-            if (!(memberName in newVnodeAttrs)) {
-                setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
-            }
-        }
-    }
-    // add new & update changed attributes
-    for (memberName in newVnodeAttrs) {
-        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
-    }
-};
-/**
- * Polyfills `cloneNode()` for slot polyfilled components ()
- * @param HostElementPrototype the host prototype to polyfill
- */
-const patchCloneNode = (HostElementPrototype) => {
-    const orgCloneNode = HostElementPrototype.cloneNode;
-    HostElementPrototype.cloneNode = function (deep) {
-        const srcNode = this;
-        const clonedNode = orgCloneNode.call(srcNode, false);
-        if (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',
-                's-sf',
-                's-sfc',
-                's-hsf',
-            ];
-            for (; i < srcNode.__childNodes.length; i++) {
-                slotted = srcNode.__childNodes[i]['s-nr'];
-                nonStencilNode = stencilPrivates.every((privateField) => !srcNode.__childNodes[i][privateField]);
-                if (slotted) {
-                    clonedNode.__appendChild(slotted.cloneNode(true));
-                }
-                if (nonStencilNode) {
-                    clonedNode.__appendChild(srcNode.__childNodes[i].cloneNode(true));
+                if (nonStencilNode) {
+                    clonedNode.__appendChild(srcNode.__childNodes[i].cloneNode(true));
                 }
             }
         }
         return clonedNode;
     };
 };
-const patchPseudoShadowDom = (HostElementPrototype) => {
-    patchChildSlotNodes(HostElementPrototype);
-    patchSlotAppendChild(HostElementPrototype);
-    patchSlotAppend(HostElementPrototype);
-    patchSlotPrepend(HostElementPrototype);
-    patchSlotInsertAdjacentHTML(HostElementPrototype);
-    patchSlotInsertAdjacentText(HostElementPrototype);
-    patchSlotInsertAdjacentElement(HostElementPrototype);
-    patchSlotReplaceChildren(HostElementPrototype);
-    patchSlotInnerHTML(HostElementPrototype);
-    patchSlotInnerText(HostElementPrototype);
-    patchTextContent(HostElementPrototype);
-    patchNodeRemoveChild(HostElementPrototype);
-};
-const patchChildSlotNodes = (HostElementPrototype) => {
+/**
+ * Patches children accessors of a non-shadow component.
+ * (`childNodes`, `children`, `firstChild`, `lastChild` and `childElementCount`)
+ * @param HostElementPrototype
+ */
+const patchChildNodes = (HostElementPrototype) => {
+    if (!globalThis.Node)
+        return;
     class FakeNodeList extends Array {
         item(n) {
             return this[n];
         }
     }
-    const childNodesDesc = Object.getOwnPropertyDescriptor(Node.prototype, 'childNodes');
+    let childNodesDesc = Object.getOwnPropertyDescriptor(Node.prototype, 'childNodes');
+    if (!childNodesDesc) {
+        childNodesDesc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(Node.prototype), 'childNodes');
+    }
     if (childNodesDesc)
         Object.defineProperty(HostElementPrototype, '__childNodes', childNodesDesc);
     let childrenDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'children');
-    // on IE it's on HTMLElement.prototype
-    if (!childrenDesc)
-        childrenDesc = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'children');
     // MockNode won't have these
     if (childrenDesc)
         Object.defineProperty(HostElementPrototype, '__children', childrenDesc);
@@ -588,7 +422,7 @@ const patchChildSlotNodes = (HostElementPrototype) => {
         get() {
             return this.childNodes
                 .map((n) => {
-                if (n.nodeType === 1)
+                if (n.nodeType === 1 /* NODE_TYPE.ElementNode */)
                     return n;
                 else
                     return null;
@@ -596,6 +430,16 @@ const patchChildSlotNodes = (HostElementPrototype) => {
                 .filter((n) => !!n);
         },
     });
+    Object.defineProperty(HostElementPrototype, 'firstChild', {
+        get() {
+            return this.childNodes[0];
+        },
+    });
+    Object.defineProperty(HostElementPrototype, 'lastChild', {
+        get() {
+            return this.childNodes[this.childNodes.length - 1];
+        },
+    });
     Object.defineProperty(HostElementPrototype, 'childElementCount', {
         get() {
             return HostElementPrototype.children.length;
@@ -608,16 +452,23 @@ const patchChildSlotNodes = (HostElementPrototype) => {
             const childNodes = this.__childNodes;
             const result = new FakeNodeList();
             for (let i = 0; i < childNodes.length; i++) {
-                const slot = childNodes[i]['s-nr'];
-                if (slot) {
-                    result.push(slot);
+                const slottedNode = childNodes[i]['s-nr'];
+                if (slottedNode &&
+                    (slottedNode.nodeType !== 8 /* NODE_TYPE.CommentNode */ || slottedNode.nodeValue.indexOf(ORG_LOCATION_ID + '.') !== 0)) {
+                    result.push(slottedNode);
                 }
             }
             return result;
         },
     });
 };
-const patchSlotInnerHTML = (HostElementPrototype) => {
+/**
+ * Patches the inner html accessors of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchInnerHTML = (HostElementPrototype) => {
+    if (!globalThis.Element)
+        return;
     let descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
     // on IE it's on HTMLElement.prototype
     if (!descriptor)
@@ -641,7 +492,13 @@ const patchSlotInnerHTML = (HostElementPrototype) => {
         },
     });
 };
-const patchSlotInnerText = (HostElementPrototype) => {
+/**
+ * Patches the inner text accessors of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchInnerText = (HostElementPrototype) => {
+    if (!globalThis.Element)
+        return;
     let descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerText');
     // on IE it's on HTMLElement.prototype
     if (!descriptor)
@@ -671,10 +528,12 @@ const patchSlotInnerText = (HostElementPrototype) => {
     });
 };
 /**
- * Patches the text content accessors of a scoped component
+ * Patches the text content accessors of a non-shadow component
  * @param HostElementPrototype the host `Element` to be patched
  */
 const patchTextContent = (HostElementPrototype) => {
+    if (!globalThis.Node)
+        return;
     const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
     // MockNode won't have these
     if (descriptor)
@@ -695,66 +554,88 @@ const patchTextContent = (HostElementPrototype) => {
         },
     });
 };
-const patchNodeRemove = (ElementPrototype) => {
-    if (!ElementPrototype || ElementPrototype.__remove)
-        return;
-    ElementPrototype.__remove = ElementPrototype.remove || true;
-    patchNodeRemoveChild(ElementPrototype.parentNode);
-    ElementPrototype.remove = function () {
-        if (this.parentNode) {
-            return this.parentNode.removeChild(this);
-        }
-        return this.__remove();
-    };
-};
-const patchNodeRemoveChild = (ElementPrototype) => {
-    if (!ElementPrototype || ElementPrototype.__removeChild)
+/**
+ * Patches the `insertBefore` of a non-shadow component.
+ * The problem solved being that the 'current' node to insert before may not be in the root of our component.
+ * This tries to find where the 'current' node lives within the component and insert the new node before it
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchInsertBefore = (HostElementPrototype) => {
+    if (HostElementPrototype.__insertBefore)
         return;
-    ElementPrototype.__removeChild = ElementPrototype.removeChild;
-    ElementPrototype.removeChild = function (toRemove) {
-        if (toRemove && typeof toRemove['s-sn'] !== 'undefined') {
-            const slotNode = getHostSlotNode(this.__childNodes || this.childNodes, toRemove['s-sn']);
-            toRemove.parentElement.__removeChild(toRemove);
-            if (slotNode && slotNode['s-hsf']) {
-                updateFallbackSlotVisibility(this);
+    HostElementPrototype.__insertBefore = HostElementPrototype.insertBefore;
+    HostElementPrototype.insertBefore = function (newChild, curChild) {
+        const slotName = (newChild['s-sn'] = getSlotName(newChild));
+        const slotNode = getHostSlotNode(this.__childNodes, slotName);
+        if (slotNode) {
+            let found = false;
+            this.childNodes.forEach((childNode) => {
+                // we found the node in our list of other 'lightDOM' / slotted nodes
+                if (childNode === curChild || curChild === null) {
+                    found = true;
+                    addSlotRelocateNode(newChild, slotNode);
+                    if (curChild === null) {
+                        this.__append(newChild);
+                        return;
+                    }
+                    if (slotName === curChild['s-sn']) {
+                        // current child ('slot before' node) is 'in' the same slot
+                        const insertBefore = curChild.parentNode.__insertBefore || curChild.parentNode.insertBefore;
+                        insertBefore.call(curChild.parentNode, newChild, curChild);
+                        patchRemove(newChild);
+                    }
+                    else {
+                        // current child is not in the same slot as 'slot before' node
+                        // so just toss the node in wherever
+                        this.__append(newChild);
+                    }
+                    return;
+                }
+            });
+            if (found) {
+                return newChild;
             }
-            return;
         }
-        return this.__removeChild(toRemove);
+        return this.__insertBefore(newChild, curChild);
     };
 };
-const patchSlotAppendChild = (HostElementPrototype) => {
+/**
+ * Patches the `appendChild` method of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchAppendChild = (HostElementPrototype) => {
     if (HostElementPrototype.__appendChild)
         return;
     HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
     HostElementPrototype.appendChild = function (newChild) {
         const slotName = (newChild['s-sn'] = getSlotName(newChild));
-        const slotNode = getHostSlotNode(this.__childNodes, slotName);
+        const slotNode = getHostSlotNode(this.__childNodes || this.childNodes, slotName);
         if (slotNode) {
-            const slotPlaceholder = document.createTextNode('');
-            slotPlaceholder['s-nr'] = newChild;
-            if (slotNode['s-cr'] && slotNode['s-cr'].parentNode) {
-                slotNode['s-cr'].parentNode.__appendChild(slotPlaceholder);
-            }
-            newChild['s-ol'] = slotPlaceholder;
-            patchNodeRemove(newChild);
-            const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+            addSlotRelocateNode(newChild, slotNode);
+            const slotChildNodes = getHostSlotChildNodes(slotNode);
             const appendAfter = slotChildNodes[slotChildNodes.length - 1];
             if (appendAfter.parentNode) {
-                appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+                const parent = appendAfter.parentNode;
+                parent.__insertBefore
+                    ? parent.__insertBefore(newChild, appendAfter.nextSibling)
+                    : parent.insertBefore(newChild, appendAfter.nextSibling);
+                patchRemove(newChild);
             }
-            patchNodeRemoveChild(newChild.parentNode);
             if (slotNode['s-hsf']) {
                 updateFallbackSlotVisibility(slotNode.parentNode);
             }
-            return;
+            return newChild;
         }
-        if (newChild.nodeType === 1 && !!newChild.getAttribute('slot') && this.__childNodes)
+        if (newChild.nodeType === 1 /* NODE_TYPE.ElementNode */ && !!newChild.getAttribute('slot') && this.__childNodes)
             newChild.hidden = true;
         return this.__appendChild(newChild);
     };
 };
-const patchSlotPrepend = (HostElementPrototype) => {
+/**
+ * Patches the `prepend` method of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchPrepend = (HostElementPrototype) => {
     if (HostElementPrototype.__prepend)
         return;
     HostElementPrototype.__prepend = HostElementPrototype.prepend;
@@ -766,31 +647,29 @@ const patchSlotPrepend = (HostElementPrototype) => {
             const slotName = (newChild['s-sn'] = getSlotName(newChild));
             const slotNode = getHostSlotNode(this.__childNodes, slotName);
             if (slotNode) {
-                const slotPlaceholder = document.createTextNode('');
-                slotPlaceholder['s-nr'] = newChild;
-                if (slotNode['s-cr'] && slotNode['s-cr'].parentNode) {
-                    slotNode['s-cr'].parentNode.__appendChild(slotPlaceholder);
-                }
-                newChild['s-ol'] = slotPlaceholder;
-                patchNodeRemove(newChild);
-                const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+                addSlotRelocateNode(newChild, slotNode);
+                const slotChildNodes = getHostSlotChildNodes(slotNode);
                 const appendAfter = slotChildNodes[0];
                 if (appendAfter.parentNode) {
                     appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+                    patchRemove(newChild);
                 }
-                patchNodeRemoveChild(newChild.parentNode);
                 if (slotNode['s-hsf']) {
                     updateFallbackSlotVisibility(slotNode.parentNode);
                 }
                 return;
             }
-            if (newChild.nodeType === 1 && !!newChild.getAttribute('slot') && this.__childNodes)
+            if (newChild.nodeType === 1 /* NODE_TYPE.ElementNode */ && !!newChild.getAttribute('slot') && this.__childNodes)
                 newChild.hidden = true;
             return this.__prepend(newChild);
         });
     };
 };
-const patchSlotAppend = (HostElementPrototype) => {
+/**
+ * Patches the `append` method of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchAppend = (HostElementPrototype) => {
     if (HostElementPrototype.__append)
         return;
     HostElementPrototype.__append = HostElementPrototype.append;
@@ -803,14 +682,18 @@ const patchSlotAppend = (HostElementPrototype) => {
         });
     };
 };
-const patchSlotReplaceChildren = (HostElementPrototype) => {
+/**
+ * Patches the `replaceChildren` method of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchReplaceChildren = (HostElementPrototype) => {
     if (HostElementPrototype.__replaceChildren)
         return;
     HostElementPrototype.__replaceChildren = HostElementPrototype.replaceChildren;
     HostElementPrototype.replaceChildren = function (...newChildren) {
         const slotNode = getHostSlotNode(this.__childNodes, '');
         if (slotNode) {
-            const slotChildNodes = getHostSlotChildNodes(slotNode, '');
+            const slotChildNodes = getHostSlotChildNodes(slotNode);
             slotChildNodes.forEach((node) => {
                 if (!node['s-sr']) {
                     node.remove();
@@ -820,7 +703,11 @@ const patchSlotReplaceChildren = (HostElementPrototype) => {
         }
     };
 };
-const patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
+/**
+ * Patches the `insertAdjacentHTML` method of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchInsertAdjacentHTML = (HostElementPrototype) => {
     if (HostElementPrototype.__insertAdjacentHTML)
         return;
     HostElementPrototype.__insertAdjacentHTML = HostElementPrototype.insertAdjacentHTML;
@@ -843,7 +730,11 @@ const patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
         }
     };
 };
-const patchSlotInsertAdjacentText = (HostElementPrototype) => {
+/**
+ * Patches the `insertAdjacentText` method of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchInsertAdjacentText = (HostElementPrototype) => {
     if (HostElementPrototype.__insertAdjacentText)
         return;
     HostElementPrototype.__insertAdjacentText = HostElementPrototype.insertAdjacentText;
@@ -851,7 +742,11 @@ const patchSlotInsertAdjacentText = (HostElementPrototype) => {
         this.insertAdjacentHTML(position, text);
     };
 };
-const patchSlotInsertAdjacentElement = (HostElementPrototype) => {
+/**
+ * Patches the `insertAdjacentElement` method of a non-shadow component
+ * @param HostElementPrototype the host `Element` to be patched
+ */
+const patchInsertAdjacentElement = (HostElementPrototype) => {
     if (HostElementPrototype.__insertAdjacentElement)
         return;
     HostElementPrototype.__insertAdjacentElement = HostElementPrototype.insertAdjacentElement;
@@ -867,110 +762,1072 @@ const patchSlotInsertAdjacentElement = (HostElementPrototype) => {
         }
     };
 };
-const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || node.slot || '';
+////// Slotted node patches
 /**
- * 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
+ * Patches sibling accessors (`nextSibling`, `nextSiblingElement`, `previousSibling`, `previousSiblingElement`)
+ * of a 'slotted' node within a non-shadow component.
+ * @param NodePrototype the slotted node to be patched
  */
-const getHostSlotNode = (childNodes, slotName) => {
-    let i = 0;
-    let childNode;
-    if (!childNodes)
-        return null;
-    for (; i < childNodes.length; i++) {
-        childNode = childNodes[i];
-        if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
-            return childNode;
+const patchNextPrev = (NodePrototype) => {
+    // Especially relevant when rendering components via SSR.
+    // Frameworks will often try to reconcile their VDOM with the real DOM
+    // by stepping through nodes with 'nextSibling' (and similar).
+    // This works with a shadowDOM; the lightDOM matches the framework's VDOM.
+    // This doesn't work without shadowDOM
+    if (!NodePrototype || NodePrototype.__nextSibling || !globalThis.Node)
+        return;
+    patchNextSibling(NodePrototype);
+    patchPreviousSibling(NodePrototype);
+    patchNextElementSibling(NodePrototype);
+    patchPreviousElementSibling(NodePrototype);
+};
+/**
+ * Patches the `nextSibling` accessor of a non-shadow slotted node
+ * @param NodePrototype the slotted node to be patched
+ */
+const patchNextSibling = (NodePrototype) => {
+    if (!NodePrototype || NodePrototype.__nextSibling)
+        return;
+    const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'nextSibling');
+    // MockNode might not have these
+    if (descriptor)
+        Object.defineProperty(NodePrototype, '__nextSibling', descriptor);
+    else {
+        NodePrototype.__nextSibling = NodePrototype.nextSibling || true;
+    }
+    Object.defineProperty(NodePrototype, 'nextSibling', {
+        get: function () {
+            var _a;
+            const parentNodes = (_a = this['s-ol']) === null || _a === void 0 ? void 0 : _a.parentNode.childNodes;
+            const index = parentNodes === null || parentNodes === void 0 ? void 0 : parentNodes.indexOf(this);
+            if (parentNodes && index > -1) {
+                return parentNodes[index + 1];
+            }
+            return this.__nextSibling;
+        },
+    });
+};
+/**
+ * Patches the `nextElementSibling` accessor of a non-shadow slotted node
+ * @param NodePrototype the slotted node to be patched
+ */
+const patchNextElementSibling = (ElementPrototype) => {
+    if (!ElementPrototype || ElementPrototype.__nextElementSibling || !ElementPrototype.nextSiblingElement)
+        return;
+    const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'nextElementSibling');
+    // MockNode won't have these
+    if (descriptor)
+        Object.defineProperty(ElementPrototype, '__nextElementSibling', descriptor);
+    else {
+        ElementPrototype.__nextElementSibling = ElementPrototype.nextSiblingElement || true;
+    }
+    Object.defineProperty(ElementPrototype, 'nextElementSibling', {
+        get: function () {
+            var _a;
+            const parentEles = (_a = this['s-ol']) === null || _a === void 0 ? void 0 : _a.parentNode.children;
+            const index = parentEles === null || parentEles === void 0 ? void 0 : parentEles.indexOf(this);
+            if (parentEles && index > -1) {
+                return parentEles[index + 1];
+            }
+            return this.__nextElementSibling;
+        },
+    });
+};
+/**
+ * Patches the `previousSibling` accessor of a non-shadow slotted node
+ * @param NodePrototype the slotted node to be patched
+ */
+const patchPreviousSibling = (NodePrototype) => {
+    if (!NodePrototype || NodePrototype.__previousSibling)
+        return;
+    const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'previousSibling');
+    // MockNode won't have these
+    if (descriptor)
+        Object.defineProperty(NodePrototype, '__previousSibling', descriptor);
+    else {
+        NodePrototype.__previousSibling = NodePrototype.previousSibling || true;
+    }
+    Object.defineProperty(NodePrototype, 'previousSibling', {
+        get: function () {
+            var _a;
+            const parentNodes = (_a = this['s-ol']) === null || _a === void 0 ? void 0 : _a.parentNode.childNodes;
+            const index = parentNodes === null || parentNodes === void 0 ? void 0 : parentNodes.indexOf(this);
+            if (parentNodes && index > -1) {
+                return parentNodes[index - 1];
+            }
+            return this.__previousSibling;
+        },
+    });
+};
+/**
+ * Patches the `previousElementSibling` accessor of a non-shadow slotted node
+ * @param ElementPrototype the slotted node to be patched
+ */
+const patchPreviousElementSibling = (ElementPrototype) => {
+    if (!ElementPrototype || ElementPrototype.__previousElementSibling || !ElementPrototype.previousElementSibling)
+        return;
+    const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'previousElementSibling');
+    // MockNode won't have these
+    if (descriptor)
+        Object.defineProperty(ElementPrototype, '__previousElementSibling', descriptor);
+    else {
+        ElementPrototype.__previousElementSibling = ElementPrototype.previousSiblingElement || true;
+    }
+    Object.defineProperty(ElementPrototype, 'previousElementSibling', {
+        get: function () {
+            var _a;
+            const parentNodes = (_a = this['s-ol']) === null || _a === void 0 ? void 0 : _a.parentNode.children;
+            const index = parentNodes === null || parentNodes === void 0 ? void 0 : parentNodes.indexOf(this);
+            if (parentNodes && index > -1) {
+                return parentNodes[index - 1];
+            }
+            return this.__previousElementSibling;
+        },
+    });
+};
+/**
+ * Patches the `remove` method of a non-shadow slotted node
+ * @param NodePrototype the slotted node to be patched
+ */
+const patchRemove = (NodePrototype) => {
+    if (!NodePrototype || NodePrototype.__remove)
+        return;
+    NodePrototype.__remove = NodePrototype.remove || true;
+    patchRemoveChild(NodePrototype.parentNode);
+    NodePrototype.remove = function () {
+        if (this.parentNode) {
+            return this.parentNode.removeChild(this);
+        }
+        return this.__remove();
+    };
+};
+/**
+ * Patches the `removeChild` method of a non-shadow slotted node
+ * @param NodePrototype the slotted node to be patched
+ */
+const patchRemoveChild = (ElementPrototype) => {
+    if (!ElementPrototype || ElementPrototype.__removeChild)
+        return;
+    ElementPrototype.__removeChild = ElementPrototype.removeChild;
+    ElementPrototype.removeChild = function (toRemove) {
+        if (toRemove && typeof toRemove['s-sn'] !== 'undefined') {
+            const slotNode = getHostSlotNode(this.__childNodes || this.childNodes, toRemove['s-sn']);
+            toRemove.parentElement.__removeChild(toRemove);
+            if (slotNode && slotNode['s-hsf']) {
+                updateFallbackSlotVisibility(slotNode.parentElement);
+            }
+            return;
+        }
+        return this.__removeChild(toRemove);
+    };
+};
+////// Utils
+/**
+ * When non-shadow component VDom re-renders,
+ * they sometimes need a place to temporarily put their 'lightDOM' elements.
+ * This function creates that node.
+ * @param newChild - A node that's going to be added to the component
+ * @param slotNode - The slot node that the node will be added to
+ */
+const addSlotRelocateNode = (newChild, slotNode) => {
+    if (newChild['s-ol'] && newChild['s-ol'].isConnected)
+        return;
+    const slotPlaceholder = document.createTextNode('');
+    slotPlaceholder['s-nr'] = newChild;
+    if (slotNode['s-cr'] && slotNode['s-cr'].parentNode) {
+        const appendChild = slotNode['s-cr'].parentNode.__appendChild || slotNode['s-cr'].parentNode.appendChild;
+        appendChild.call(slotNode['s-cr'].parentNode, slotPlaceholder);
+    }
+    newChild['s-ol'] = slotPlaceholder;
+};
+/**
+ * Find the slot name of a given node
+ * @param node
+ * @returns the node's slot name
+ */
+const getSlotName = (node) => node['s-sn'] ||
+    (node.nodeType === 1 /* NODE_TYPE.ElementNode */ && node.getAttribute('slot')) ||
+    node.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;
+    if (!childNodes)
+        return null;
+    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;
+};
+/**
+ * Get all nodes currently assigned to any given slot node
+ * @param slotNode - the slot node to check
+ * @returns - all child node 'within' the checked slot node
+ */
+const getHostSlotChildNodes = (slotNode) => {
+    const childNodes = [slotNode];
+    const slotName = slotNode['s-sn'] || '';
+    while ((slotNode = slotNode.nextSibling) && slotNode['s-sn'] === slotName) {
+        childNodes.push(slotNode);
+    }
+    return childNodes;
+};
+/**
+ * Takes an SSR rendered document, as annotated by 'vdom-annotations.ts' and:
+ * 1) Recreate an accurate VDOM tree to reconcile with during 'vdom-render.ts'
+ *    (a failure to do so will result in DOM nodes being duplicated when rendering)
+ * 2) Add `shadow: true` DOM trees to their document-fragment
+ * 3) Move slotted nodes out of shadowDOMs
+ * 4) Add meta nodes to non-shadow DOMs and their 'slotted' nodes
+ *
+ * @param hostElm - the current custom element being hydrated
+ * @param tagName - the custom element's tag
+ * @param hostId - a unique custom element id
+ * @param hostRef - the VNode representing this custom element
+ */
+const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+    const endHydrate = createTime('hydrateClient', tagName);
+    const shadowRoot = hostElm.shadowRoot;
+    const childRenderNodes = [];
+    const slotNodes = [];
+    const slottedNodes = [];
+    const shadowRootNodes = shadowRoot ? [] : null;
+    let vnode = newVNode(tagName, null);
+    vnode.$elm$ = hostElm;
+    if (!plt.$orgLocNodes$) {
+        // this is the first pass over of this whole document
+        // does a quick scrape to construct a 'bare-bones' tree of
+        // what elements we have and where content has been moved from
+        initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
+    }
+    hostElm[HYDRATE_ID] = hostId;
+    hostElm.removeAttribute(HYDRATE_ID);
+    hostRef.$vnode$ = clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId, slottedNodes);
+    let crIndex = 0;
+    const crLength = childRenderNodes.length;
+    let childRenderNode;
+    // Steps through childNodes we found.
+    // If moved from an original location (by nature of being rendered in SSR markup)
+    // we might be able to move it back there now,
+    // so slotted nodes don't get added to internal shadowDOMs
+    for (crIndex; crIndex < crLength; crIndex++) {
+        childRenderNode = childRenderNodes[crIndex];
+        const orgLocationId = childRenderNode.$hostId$ + '.' + childRenderNode.$nodeId$;
+        const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
+        const node = childRenderNode.$elm$;
+        if (!shadowRoot) {
+            node['s-hn'] = tagName.toUpperCase();
+            if (childRenderNode.$tag$ === 'slot') {
+                // if this is a 'mock slot'
+                // add it's content position reference now.
+                // otherwise vdom-render will try to add nodes to it
+                // (it's a comment node so will error)
+                node['s-cr'] = hostElm['s-cr'];
+            }
+        }
+        if (orgLocationNode && orgLocationNode.isConnected) {
+            if (shadowRoot && orgLocationNode['s-en'] === '') {
+                // if this node is within a shadowDOM, with an original location home
+                // we're safe to move it now
+                orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+            }
+            // Remove original location comment now regardless:
+            // 1) Stops SSR frameworks complaining about mismatches
+            // 2) is un-required for non-shadow, slotted nodes as
+            //    we'll add all the meta nodes we need when we deal with *all* slotted nodes ↓↓↓
+            orgLocationNode.parentNode.removeChild(orgLocationNode);
+        }
+        // remove the original location from the map
+        plt.$orgLocNodes$.delete(orgLocationId);
+    }
+    const hosts = [];
+    let snIndex = 0;
+    const snLen = slottedNodes.length;
+    let slotGroup;
+    let snGroupIdx;
+    let snGroupLen;
+    let slottedItem;
+    // Loops through all the slotted nodes we found while
+    // stepping through this component
+    for (snIndex; snIndex < snLen; snIndex++) {
+        slotGroup = slottedNodes[snIndex];
+        if (!slotGroup || !slotGroup.length)
+            continue;
+        snGroupLen = slotGroup.length;
+        snGroupIdx = 0;
+        for (snGroupIdx; snGroupIdx < snGroupLen; snGroupIdx++) {
+            slottedItem = slotGroup[snGroupIdx];
+            if (!hosts[slottedItem.hostId]) {
+                // cache this host for other grouped slotted nodes
+                hosts[slottedItem.hostId] = plt.$orgLocNodes$.get(slottedItem.hostId);
+            }
+            // this shouldn't happen
+            // as we collect all the custom elements first in `initializeDocumentHydrate`
+            if (!hosts[slottedItem.hostId])
+                continue;
+            const hostEle = hosts[slottedItem.hostId];
+            // this node is either slotted in a non-shadow host, OR
+            // *that* host is nested in a non-shadow host
+            if (!hostEle.shadowRoot || !shadowRoot) {
+                // try to set an appropriate content position reference
+                // (CR) node for this host element
+                // a CR already set on the host?
+                slottedItem.slot['s-cr'] = hostEle['s-cr'];
+                if (!slottedItem.slot['s-cr'] && hostEle.shadowRoot) {
+                    // host is shadowDOM - just use the host itself as the CR for native slotting
+                    slottedItem.slot['s-cr'] = hostEle;
+                }
+                else {
+                    // if all else fails - just set the CR as the first child
+                    // (9/10 if node['s-cr'] hasn't been set, the node will be at the element root)
+                    const hostChildren = hostEle.__childNodes || hostEle.childNodes;
+                    slottedItem.slot['s-cr'] = hostChildren[0];
+                }
+                // create our original location node
+                addSlotRelocateNode(slottedItem.node, slottedItem.slot);
+                // patch this node for accessors like `nextSibling` (et al)
+                patchNextPrev(slottedItem.node);
+            }
+            if (hostEle.shadowRoot) {
+                // shadowDOM - move the item to the element root for
+                // native slotting
+                hostEle.appendChild(slottedItem.node);
+            }
+        }
+    }
+    if (shadowRoot) {
+        // add all the root nodes in the shadowDOM
+        // (a root node can have a whole nested DOM tree)
+        let rnIdex = 0;
+        const rnLen = shadowRootNodes.length;
+        for (rnIdex; rnIdex < rnLen; rnIdex++) {
+            shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+        }
+        // tidy up left-over / unnecessary comments to stop
+        // frameworks complaining about DOM mismatches
+        Array.from(hostElm.childNodes).forEach((node) => {
+            if (node.nodeType === 8 /* NODE_TYPE.CommentNode */ && typeof node['s-sn'] !== 'string') {
+                node.parentNode.removeChild(node);
+            }
+        });
+    }
+    hostRef.$hostElement$ = hostElm;
+    endHydrate();
+};
+/**
+ * Recursively step through a nodes' SSR DOM.
+ * Constructs a VDOM. Finds and adds nodes to master arrays
+ * (`childRenderNodes`, `shadowRootNodes` and `slottedNodes`)
+ * these are used later for special consideration:
+ * - Add `shadow: true` DOM trees to their document-fragment
+ * - Move slotted nodes out of shadowDOMs
+ * - Add meta nodes to non-shadow DOMs and their 'slotted' nodes
+ * @param parentVNode - this nodes current parent vnode
+ * @param childRenderNodes - flat array of all child vnodes
+ * @param slotNodes - nodes that represent an element's `<slot />`s
+ * @param shadowRootNodes - nodes that are at the root of this hydrating element
+ * @param hostElm - the root, hydrating element
+ * @param node - the node currently being iterated over
+ * @param hostId - the root, hydrating element id
+ * @param slottedNodes - nodes that have been slotted
+ * @returns - the constructed VNode
+ */
+const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId, slottedNodes = []) => {
+    let childNodeType;
+    let childIdSplt;
+    let childVNode;
+    let i;
+    const scopeId = hostElm['s-sc'];
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+        if (childNodeType) {
+            // got the node data from the element's attribute
+            // `${hostId}.${nodeId}.${depth}.${index}`
+            childIdSplt = childNodeType.split('.');
+            if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
+                childVNode = createSimpleVNode({
+                    $hostId$: childIdSplt[0],
+                    $nodeId$: childIdSplt[1],
+                    $depth$: childIdSplt[2],
+                    $index$: childIdSplt[3],
+                    $tag$: node.tagName.toLowerCase(),
+                    $elm$: node,
+                    // if we don't add the initial classes to the VNode,
+                    // the first vdom-render patch / reconciliation will fail;
+                    // any client side change before componentDidLoad will be ignored,
+                    // `setAccessor` will just take the element's initial classes
+                    $attrs$: { class: node.className },
+                });
+                childRenderNodes.push(childVNode);
+                node.removeAttribute(HYDRATE_CHILD_ID);
+                // this is a new child vnode
+                // so ensure it's parent vnode has the vchildren array
+                if (!parentVNode.$children$) {
+                    parentVNode.$children$ = [];
+                }
+                // test if this element was 'slotted'
+                // recreate node attributes
+                const slotName = childVNode.$elm$.getAttribute('s-sn');
+                if (typeof slotName === 'string') {
+                    childVNode.$elm$['s-sn'] = slotName;
+                    childVNode.$elm$.removeAttribute('s-sn');
+                }
+                // test if this node is the child (a slot fallback node) of a slot
+                const slotFbId = childVNode.$elm$.getAttribute(HYDRATED_SLOT_FALLBACK_ID);
+                if (slotFbId) {
+                    childVNode.$elm$.removeAttribute(HYDRATED_SLOT_FALLBACK_ID);
+                    // find the relevant slot node
+                    const slotNode = slotNodes.find((slot) => (slot.$elm$['s-sn'] === childVNode.$elm$['s-sn'] || slot.$name$ === childVNode.$elm$['s-sn']));
+                    // add the relationship to the VDOM to stop re-renders
+                    if (slotNode) {
+                        childVNode.$elm$['s-sf'] = true;
+                        childVNode.$elm$['s-hn'] = hostElm.tagName;
+                        slotNode.$children$ = slotNode.$children$ || [];
+                        slotNode.$children$[childVNode.$index$] = childVNode;
+                        // if the slot is an actual `<slot>`
+                        // that's a newly created node (↓↓↓)
+                        // move this element there now
+                        if (slotNode.$elm$.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                            slotNode.$elm$.appendChild(childVNode.$elm$);
+                        }
+                    }
+                }
+                else if (childVNode.$index$ !== undefined) {
+                    // add our child vnode to a specific index of the vnode's children
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                }
+                // host is `scoped: true` - add that flag to child.
+                // used in 'setAccessor' to make sure our scoped class is present
+                if (scopeId)
+                    node['s-si'] = scopeId;
+                // this is now the new parent vnode for all the next child checks
+                parentVNode = childVNode;
+                if (shadowRootNodes &&
+                    childVNode.$depth$ === '0' &&
+                    // don't move slot fallback node into the root nodes array
+                    // they'll be moved into a new slot element ↓↓↓
+                    !slotFbId) {
+                    shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                }
+            }
+        }
+        // recursively drill down, end to start so we can
+        // construct a VDOM and add meta to nodes
+        const nonShadowChildNodes = node.__childNodes || node.childNodes;
+        for (i = nonShadowChildNodes.length - 1; i >= 0; i--) {
+            clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, nonShadowChildNodes[i], hostId, slottedNodes);
+        }
+        if (node.shadowRoot) {
+            // keep drilling down through the shadow root nodes
+            for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
+                clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId, slottedNodes);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}.${isSlotFallbackText}.${slotName}`
+        childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
+            // comment node for either the host id or a 0 host id
+            childNodeType = childIdSplt[0];
+            childVNode = createSimpleVNode({
+                $hostId$: childIdSplt[1],
+                $nodeId$: childIdSplt[2],
+                $depth$: childIdSplt[3],
+                $index$: childIdSplt[4] || '0',
+                $elm$: node,
+            });
+            if (childNodeType === TEXT_NODE_ID) {
+                let textNode = childVNode.$elm$ = node.nextSibling;
+                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {
+                    childVNode.$text$ = childVNode.$elm$.textContent;
+                    childRenderNodes.push(childVNode);
+                    // remove the text comment since it's no longer needed
+                    node.remove();
+                    // test to see if this is slot fallback text
+                    if (childIdSplt[5] === '1') {
+                        textNode['s-sf'] = true;
+                        textNode['s-sn'] = childIdSplt[6] || '';
+                        textNode['s-sfc'] = textNode.textContent;
+                        textNode['s-hn'] = hostElm.tagName;
+                        // find the relevant slot node
+                        const slotNode = slotNodes.find((slot) => (slot.$elm$['s-sn'] === textNode['s-sn'] || slot.$name$ === textNode['s-sn']));
+                        // add the relationship to the VDOM to stop re-renders
+                        if (slotNode) {
+                            slotNode.$children$ = slotNode.$children$ || [];
+                            slotNode.$children$[childVNode.$index$] = childVNode;
+                            // if the slot is an actual `<slot>`
+                            // that's a newly created node (↓↓↓)
+                            // move this text node there now
+                            if (slotNode.$elm$.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                                slotNode.$elm$.appendChild(textNode);
+                            }
+                        }
+                    }
+                    else {
+                        // check to make sure this node actually belongs to this host.
+                        // If it was slotted from another component, we don't want to add it
+                        // to this host's vdom; it can be removed on render reconciliation.
+                        // We want slotting logic to take care of it
+                        if (hostId === childVNode.$hostId$) {
+                            if (!parentVNode.$children$) {
+                                parentVNode.$children$ = [];
+                            }
+                            parentVNode.$children$[childVNode.$index$] = childVNode;
+                        }
+                        if (shadowRootNodes && childVNode.$depth$ === '0') {
+                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                        }
+                    }
+                }
+            }
+            else if (childVNode.$hostId$ === hostId) {
+                // this comment node is specifically for this host id
+                if (childNodeType === SLOT_NODE_ID) {
+                    // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}.${hasSlotFallback}.${slotFallbackText}`;
+                    childVNode.$tag$ = 'slot';
+                    // TODO: this is clunky.
+                    // Clear out parent VNode attrs so the initial element state is used as a reference.
+                    // The reason: this is a slot container element and requires special scope classes
+                    // This does mean any class changes client-side before 'componentDidLoad',
+                    // will not be respected.
+                    parentVNode.$attrs$ = undefined;
+                    // add slot name
+                    const slotName = (node['s-sn'] = childVNode.$name$ = childIdSplt[5] || '');
+                    node['s-sr'] = true;
+                    // this slot node has fallback nodes?
+                    if (childIdSplt[6] === '1') {
+                        node['s-hsf'] = true;
+                    }
+                    if (childIdSplt[7] === '1') {
+                        // this slot has fallback text
+                        // it should be held in the previous comment node
+                        // (white-space depending)
+                        let foundFallbackText = node.previousSibling;
+                        while (!!foundFallbackText && foundFallbackText.nodeType !== 8 /* NODE_TYPE.CommentNode */) {
+                            foundFallbackText = foundFallbackText.previousSibling;
+                        }
+                        // this slot node has fallback text?
+                        // (if so, the previous node comment will have that text)
+                        node['s-sfc'] = foundFallbackText.nodeValue;
+                    }
+                    // find this slots' current host parent as dictated by the vdom tree.
+                    // this is important because where it is now in the constructed SSR markup
+                    // might be different to where to should be
+                    const parentNodeId = (parentVNode === null || parentVNode === void 0 ? void 0 : parentVNode.$elm$)
+                        ? parentVNode.$elm$['s-id'] || parentVNode.$elm$.getAttribute('s-id')
+                        : '';
+                    if (shadowRootNodes) {
+                        /* SHADOW */
+                        // browser supports shadowRoot and this is a shadow dom component
+                        // create an actual slot element
+                        const slot = (childVNode.$elm$ = doc.createElement(childVNode.$tag$));
+                        if (childVNode.$name$) {
+                            // add the slot name attribute
+                            childVNode.$elm$.setAttribute('name', slotName);
+                        }
+                        if (parentNodeId && parentNodeId !== childVNode.$hostId$) {
+                            // shadow component's slot is placed inside a nested component's shadowDOM;
+                            // it doesn't belong to this host - it was forwarded by the SSR markup.
+                            // Insert it in the root of this host; it's lightDOM.
+                            // It doesn't really matter where in the host root; the component will take care of it.
+                            parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+                        }
+                        else {
+                            // insert the new slot element before the slot comment
+                            node.parentNode.insertBefore(childVNode.$elm$, node);
+                        }
+                        addSlottedNodes(slottedNodes, childIdSplt[2], slotName, node, childVNode.$hostId$);
+                        // remove the slot comment since it's not needed for shadow
+                        node.remove();
+                        if (childVNode.$depth$ === '0') {
+                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                        }
+                    }
+                    else {
+                        /* NON-SHADOW */
+                        const slot = childVNode.$elm$;
+                        // test to see if this non-shadow component's mock 'slot' is placed
+                        // inside a nested component's shadowDOM. If so, it doesn't belong here;
+                        // it was forwarded by the SSR markup. So we'll insert it into the root of this host;
+                        // it's lightDOM with accompanying 'slotted' nodes
+                        const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
+                        // attempt to find any mock slotted nodes which we'll move later
+                        addSlottedNodes(slottedNodes, childIdSplt[2], slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
+                        if (shouldMove) {
+                            // move slot comment node (to after any other comment nodes)
+                            parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+                        }
+                        childRenderNodes.push(childVNode);
+                    }
+                    slotNodes.push(childVNode);
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                }
+                else if (childNodeType === CONTENT_REF_ID) {
+                    // `${CONTENT_REF_ID}.${hostId}`;
+                    if (shadowRootNodes) {
+                        // remove the content ref comment since it's not needed for shadow
+                        node.remove();
+                    }
+                    else {
+                        hostElm['s-cr'] = node;
+                        node['s-cn'] = true;
+                    }
+                }
+            }
+        }
+    }
+    else if (parentVNode && parentVNode.$tag$ === 'style') {
+        const vnode = newVNode(null, node.textContent);
+        vnode.$elm$ = node;
+        vnode.$index$ = '0';
+        parentVNode.$children$ = [vnode];
+    }
+    return parentVNode;
+};
+/**
+ * Skims whole SSR document to create
+ * a map of component IDs and 'original location ID's.
+ * original location ID's are derived from comment nodes placed by 'vdom-annotations.ts'.
+ * They relate to lightDOM nodes that were moved deeper into the SSR markup.
+ * e.g. `<!--o.1-->` maps to `<div c-id="0.1">`
+ *
+ * @param node - a node in the document. If an element, will recursively drill down
+ * @param orgLocNodes - a master map to add component ids and original location ids to
+ */
+const initializeDocumentHydrate = (node, orgLocNodes) => {
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        // add all the loaded component IDs in this document
+        // they're required to find nodes later
+        // when deciding where slotted nodes should live
+        const componentId = node[HYDRATE_ID] || node.getAttribute(HYDRATE_ID);
+        if (componentId) {
+            orgLocNodes.set(componentId, node);
+        }
+        let i = 0;
+        const nonShadowChildNodes = node.__childNodes || node.childNodes;
+        for (; i < nonShadowChildNodes.length; i++) {
+            initializeDocumentHydrate(nonShadowChildNodes[i], orgLocNodes);
+        }
+        if (node.shadowRoot) {
+            for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
+                initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        const childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[0] === ORG_LOCATION_ID) {
+            orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
+            // useful to know if the original location is
+            // the root light-dom of a shadow dom component
+            node['s-en'] = childIdSplt[3];
+        }
+    }
+};
+/**
+ * Creates a vnode to add to a hydrated component vdom
+ * @param vnode - a vnode partial which will be augmented
+ * @returns an complete vnode
+ */
+const createSimpleVNode = (vnode) => {
+    const defaultVNode = {
+        $flags$: 0,
+        $hostId$: null,
+        $nodeId$: null,
+        $depth$: null,
+        $index$: '0',
+        $elm$: null,
+        $attrs$: null,
+        $children$: null,
+        $key$: null,
+        $name$: null,
+        $tag$: null,
+        $text$: null,
+    };
+    return Object.assign(Object.assign({}, defaultVNode), vnode);
+};
+/**
+ * Adds groups of slotted nodes (grouped by slot ID)
+ * to this host element's 'master' array. We'll use this after
+ * the host element's VDOM is completely constructed to
+ * finally position or / and add meta information required by non-shadow slotted nodes
+ * @param slottedNodes - the main host element 'master' array to add to
+ * @param slotNodeId - the slot node unique ID
+ * @param slotName - the slot node name (can be '')
+ * @param slotNode - the slot node
+ * @param hostId - the host element id where this node should be slotted
+ */
+const addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
+    let slottedNode = slotNode.nextSibling;
+    slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
+    // looking for nodes that match this slot's name,
+    // OR are text / comment nodes and the slot is a default slot (no name)
+    // (text / comments cannot be direct descendants of named slots)
+    // also ignore slot fallback nodes
+    while (slottedNode &&
+        (slottedNode['s-sn'] === slotName ||
+            (slotName === '' &&
+                !slottedNode['s-sn'] &&
+                ((slottedNode.nodeType === 8 /* NODE_TYPE.CommentNode */ && slottedNode.nodeValue.indexOf('.') !== 1) ||
+                    slottedNode.nodeType === 3 /* NODE_TYPE.TextNode */))) &&
+        !slottedNode['s-sf']) {
+        slottedNode['s-sn'] = slotName;
+        slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
+        slottedNode = slottedNode.nextSibling;
+    }
+};
+// Private
+const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
+const parsePropertyValue = (propValue, propType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && !isComplexType(propValue)) {
+        if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
+        if (propType & 2 /* MEMBER_FLAGS.Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (propType & 1 /* MEMBER_FLAGS.String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+const getElement = (ref) => (getHostRef(ref).$hostElement$ );
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
+                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
+                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
+                detail,
+            });
+        },
+    };
+};
+/**
+ * Helper function to create & dispatch a custom Event on a provided target
+ * @param elm the target of the Event
+ * @param name the name to give the custom Event
+ * @param opts options for configuring a custom Event
+ * @returns the custom Event
+ */
+const emitEvent = (elm, name, opts) => {
+    const ev = plt.ce(name, opts);
+    elm.dispatchEvent(ev);
+    return ev;
+};
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
+const registerStyle = (scopeId, cssText, allowCS) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructableStylesheets && allowCS) {
+        style = (style || new CSSStyleSheet());
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
+    let scopeId = getScopeId(cmpMeta);
+    const style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+            }
+            if (!appliedStyles.has(scopeId)) {
+                if (styleContainerNode.host &&
+                    (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
+                    // This is only happening on native shadow-dom, do not needs CSS var shim
+                    styleElm.innerHTML = style;
+                }
+                else {
+                    {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    // Apply CSP nonce to the style tag if it exists
+                    const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                    if (nonce != null) {
+                        styleElm.setAttribute('nonce', nonce);
+                    }
+                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
         }
-        childNode = getHostSlotNode(childNode.childNodes, slotName);
-        if (childNode) {
-            return childNode;
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
         }
     }
-    return null;
+    return scopeId;
 };
-const getHostSlotChildNodes = (n, slotName) => {
-    const childNodes = [n];
-    while ((n = n.nextSibling) && n['s-sn'] === slotName) {
-        childNodes.push(n);
+const attachStyles = (hostRef) => {
+    const cmpMeta = hostRef.$cmpMeta$;
+    const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
+    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
+    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
+    if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = scopeId;
+        elm.classList.add(scopeId + '-h');
+        if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
     }
-    return childNodes;
+    endAttachStyles();
 };
-const renderSlotFallbackContent = (sr, hide) => {
-    if (!sr['s-hsf'])
-        return;
-    let n = sr;
-    while ((n = (n.previousSibling || n.parentNode)) && n.tagName !== sr['s-hn']) {
-        if (n['s-sr'] && hide && n['s-psn'] && n['s-psn'] === sr['s-sn']) {
-            renderSlotFallbackContent(n, true);
-            continue;
+const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
+const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
+/**
+ * Production setAccessor() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
+    if (oldValue !== newValue) {
+        let isProp = isMemberInElement(elm, memberName);
+        let ln = memberName.toLowerCase();
+        if (memberName === 'class') {
+            const classList = elm.classList;
+            const oldClasses = parseClassList(oldValue);
+            const newClasses = parseClassList(newValue);
+            // for `scoped: true` components, new nodes after initial hydration
+            // from SSR don't have the slotted class added. Let's add that now
+            if (elm['s-si'] && newClasses.indexOf(elm['s-si']) < 0) {
+                newClasses.push(elm['s-si']);
+            }
+            classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+            classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
-        if (n['s-sn'] !== sr['s-sn'])
-            continue;
-        if (n.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-            n.hidden = hide;
-            n.style.display = hide ? 'none' : '';
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
         }
-        else if (!!n['s-sfc']) {
-            if (hide) {
-                n['s-sfc'] = n.textContent || undefined;
-                n.textContent = '';
+        else if (memberName === 'key')
+            ;
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
+        else if ((!isProp ) &&
+            memberName[0] === 'o' &&
+            memberName[1] === 'n') {
+            // Event Handlers
+            // so if the member name starts with "on" and the 3rd characters is
+            // a capital letter, and it's not already a member on the element,
+            // then we're assuming it's an event listener
+            if (memberName[2] === '-') {
+                // on- prefixed events
+                // allows to be explicit about the dom event to listen without any magic
+                // under the hood:
+                // <my-cmp on-click> // listens for "click"
+                // <my-cmp on-Click> // listens for "Click"
+                // <my-cmp on-ionChange> // listens for "ionChange"
+                // <my-cmp on-EVENTS> // listens for "EVENTS"
+                memberName = memberName.slice(3);
+            }
+            else if (isMemberInElement(win, ln)) {
+                // standard event
+                // the JSX attribute could have been "onMouseOver" and the
+                // member name "onmouseover" is on the window's prototype
+                // so let's add the listener "mouseover", which is all lowercased
+                memberName = ln.slice(2);
+            }
+            else {
+                // custom event
+                // the JSX attribute could have been "onMyCustomEvent"
+                // so let's trim off the "on" prefix and lowercase the first character
+                // and add the listener "myCustomEvent"
+                // except for the first character, we keep the event name case
+                memberName = ln[2] + memberName.slice(3);
+            }
+            if (oldValue) {
+                plt.rel(elm, memberName, oldValue, false);
             }
-            else if (!n.textContent || n.textContent.trim() === '') {
-                n.textContent = n['s-sfc'];
+            if (newValue) {
+                plt.ael(elm, memberName, newValue, false);
             }
         }
-    }
-};
-const updateFallbackSlotVisibility = (elm) => {
-    const childNodes = elm.__childNodes || elm.childNodes;
-    let childNode;
-    let i;
-    let ilen;
-    let j;
-    let slotNameAttr;
-    let nodeType;
-    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
-        childNode = childNodes[i];
-        if (childNode['s-sr']) {
-            // this is a slot fallback node
-            // get the slot name for this slot reference node
-            slotNameAttr = childNode['s-sn'];
-            // by default always show a fallback slot node
-            // then hide it if there are other slots in the light dom
-            renderSlotFallbackContent(childNode, false);
-            for (j = 0; j < ilen; j++) {
-                nodeType = childNodes[j].nodeType;
-                if (childNodes[j]['s-sf'])
-                    continue;
-                if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
-                    // this sibling node is from a different component OR is a named fallback slot node
-                    if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j]['s-sn']) {
-                        renderSlotFallbackContent(childNode, true);
-                        patchNodeRemove(childNodes[j]);
-                        break;
+        else {
+            // Set property if it exists and it's not a SVG
+            const isComplex = isComplexType(newValue);
+            if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
+                try {
+                    if (!elm.tagName.includes('-')) {
+                        const n = newValue == null ? '' : newValue;
+                        // Workaround for Safari, moving the <input> caret when re-assigning the same valued
+                        if (memberName === 'list') {
+                            isProp = false;
+                        }
+                        else if (oldValue == null || elm[memberName] != n) {
+                            elm[memberName] = n;
+                        }
+                    }
+                    else {
+                        elm[memberName] = newValue;
                     }
                 }
-                else if (childNodes[j]['s-sn'] === slotNameAttr) {
-                    // this is a default fallback slot node
-                    // any element or text node (with content)
-                    // should hide the default fallback slot node
-                    if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
-                        (nodeType === 3 /* NODE_TYPE.TextNode */ &&
-                            childNodes[j] &&
-                            childNodes[j].textContent &&
-                            childNodes[j].textContent.trim() !== '')) {
-                        renderSlotFallbackContent(childNode, true);
-                        patchNodeRemove(childNodes[j]);
-                        break;
+                catch (e) { }
+            }
+            /**
+             * Need to manually update attribute if:
+             * - memberName is not an attribute
+             * - if we are rendering the host element in order to reflect attribute
+             * - if it's a SVG, since properties might not work in <svg>
+             * - if the newValue is null/undefined or 'false'.
+             */
+            let xlink = false;
+            {
+                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
+                    memberName = ln;
+                    xlink = true;
+                }
+            }
+            if (newValue == null || newValue === false) {
+                if (newValue !== false || elm.getAttribute(memberName) === '') {
+                    if (xlink) {
+                        elm.removeAttributeNS(XLINK_NS, memberName);
+                    }
+                    else {
+                        elm.removeAttribute(memberName);
                     }
                 }
             }
+            else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
+                newValue = newValue === true ? '' : newValue;
+                if (xlink) {
+                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
+                }
+                else {
+                    elm.setAttribute(memberName, newValue);
+                }
+            }
         }
-        // keep drilling down
-        updateFallbackSlotVisibility(childNode);
+    }
+};
+const parseClassListRegex = /\s/;
+const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
+const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
+    // if the element passed in is a shadow root, which is a document fragment
+    // then we want to be adding attrs/props to the shadow root's "host" element
+    // if it's not a shadow root, then we add attrs/props to the same element
+    const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
+        ? newVnode.$elm$.host
+        : newVnode.$elm$;
+    const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
+    const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
+    {
+        // remove attributes no longer present on the vnode by setting them to undefined
+        for (memberName in oldVnodeAttrs) {
+            if (!(memberName in newVnodeAttrs)) {
+                setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
+            }
+        }
+    }
+    // add new & update changed attributes
+    for (memberName in newVnodeAttrs) {
+        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
     }
 };
 /**
@@ -1047,30 +1904,41 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             elm['s-cr'] = contentRef;
             // remember the slot name, or empty string for default slot
             elm['s-sn'] = newVNode.$name$ || '';
-            if (newParentVNode.$name$)
+            // if this slot is nested within another parent slot, add that slot's name.
+            // (used in 'renderSlotFallbackContent')
+            if (newParentVNode.$name$) {
                 elm['s-psn'] = newParentVNode.$name$;
+            }
             if (newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */) {
                 if (newVNode.$children$) {
+                    // this slot has fallback nodes
                     for (i = 0; i < newVNode.$children$.length; ++i) {
                         // create the node
-                        let containerElm = elm.nodeType === 1 ? elm : parentElm;
-                        while (containerElm.nodeType !== 1) {
+                        let containerElm = elm.nodeType === 1 /* NODE_TYPE.ElementNode */ ? elm : parentElm;
+                        while (containerElm.nodeType !== 1 /* NODE_TYPE.ElementNode */) {
                             containerElm = containerElm.parentNode;
                         }
                         childNode = createElm(oldParentVNode, newVNode, i, containerElm);
+                        // add new node meta.
+                        // slot has fallback and childnode is slot fallback
                         childNode['s-sf'] = elm['s-hsf'] = true;
-                        if (typeof childNode['s-sn'] === 'undefined')
+                        if (typeof childNode['s-sn'] === 'undefined') {
                             childNode['s-sn'] = newVNode.$name$ || '';
+                        }
                         if (childNode.nodeType === 3 /* NODE_TYPE.TextNode */) {
                             childNode['s-sfc'] = childNode.textContent;
                         }
-                        // return node could have been null
-                        if (childNode) {
+                        // make sure a node was created
+                        // and we don't have a node already present
+                        // (if a node is already attached, we'll just patch it)
+                        if (childNode && (!oldParentVNode || !oldParentVNode.$children$[i])) {
                             // append our new node
-                            containerElm.__appendChild ? containerElm.__appendChild(childNode) : containerElm.appendChild(childNode);
+                            containerElm.appendChild(childNode);
                         }
                     }
                 }
+                if (oldParentVNode)
+                    patch(oldParentVNode, newVNode);
             }
             // check if we've got an old vnode for this slot
             oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
@@ -1437,7 +2305,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
         fbSlotsIdx = fbSlots.length - 1;
         for (i = 0; i <= fbSlotsIdx; ++i) {
             fbSlot = fbSlots[i];
-            if (!fbNodes[fbSlot['s-sn']])
+            if (typeof fbNodes[fbSlot['s-sn']] === 'undefined')
                 continue;
             fbNodesIdx = fbNodes[fbSlot['s-sn']].length - 1;
             for (j = 0; j <= fbNodesIdx; ++j) {
@@ -1698,13 +2566,14 @@ const renderVdom = (hostRef, renderFnResults) => {
                     // by default we're just going to insert it directly
                     // after the slot reference node
                     parentNodeRef = relocateData.$slotRefNode$.parentNode;
-                    insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
+                    insertBeforeNode =
+                        relocateData.$slotRefNode$.__nextSibling || relocateData.$slotRefNode$.nextSibling;
                     orgLocationNode = nodeToRelocate['s-ol'];
                     ogInsertBeforeNode = insertBeforeNode;
-                    while ((orgLocationNode = orgLocationNode.previousSibling)) {
+                    while ((orgLocationNode = (orgLocationNode.__previousSibling || orgLocationNode.previousSibling))) {
                         refNode = orgLocationNode['s-nr'];
                         if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
-                            refNode = refNode.nextSibling;
+                            refNode = refNode.__nextSibling || refNode.nextSibling;
                             if (!refNode || !refNode['s-nr']) {
                                 insertBeforeNode = refNode;
                                 break;
@@ -1712,7 +2581,7 @@ const renderVdom = (hostRef, renderFnResults) => {
                         }
                     }
                     if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
-                        nodeToRelocate.nextSibling !== insertBeforeNode) {
+                        (nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling) !== insertBeforeNode) {
                         // we've checked that it's worth while to relocate
                         // since that the node to relocate
                         // has a different next sibling or parent relocated
@@ -2250,7 +3119,22 @@ const connectedCallback = (elm) => {
         if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
             // first time this component has connected
             hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
+            let hostId;
             {
+                hostId = elm.getAttribute(HYDRATE_ID);
+                if (hostId) {
+                    if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
+                        const scopeId = addStyle(elm.shadowRoot, cmpMeta);
+                        elm.classList.remove(scopeId + '-h', scopeId + '-s');
+                    }
+                    else if (cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+                        let scopeId = getScopeId(cmpMeta);
+                        elm['s-sc'] = scopeId;
+                    }
+                    initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
+                }
+            }
+            if (!hostId) {
                 // initUpdate
                 // if the slot polyfill is required we'll need to put some nodes
                 // in here to act as original content anchors as we move nodes around
@@ -2266,7 +3150,10 @@ const connectedCallback = (elm) => {
                 while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
                     // climb up the ancestors looking for the first
                     // component that hasn't finished its lifecycle update yet
-                    if (ancestorComponent['s-p']) {
+                    if ((ancestorComponent.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
+                        ancestorComponent.hasAttribute('s-id') &&
+                        ancestorComponent['s-p']) ||
+                        ancestorComponent['s-p']) {
                         // we found this components first ancestor component
                         // keep a reference to this component's ancestor component
                         attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
@@ -2330,6 +3217,7 @@ const disconnectedCallback = (elm) => {
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -2338,10 +3226,16 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
     const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
+    const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    {
+        // If the app is already hydrated there is not point to disable the
+        // async queue. This will improve the first input delay
+        plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;
+    }
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             const cmpMeta = {
@@ -2371,6 +3265,18 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     // @ts-ignore
                     super(self);
                     self = this;
+                    {
+                        const scopeId = getScopeId(cmpMeta, computeMode(self));
+                        const style = Array.from(styles).find((style) => style.getAttribute(HYDRATED_STYLE_ID) === scopeId);
+                        if (style) {
+                            if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
+                                registerStyle(scopeId, convertScopedToShadow(style.innerHTML), true);
+                            }
+                            else {
+                                registerStyle(scopeId, style.innerHTML, false);
+                            }
+                        }
+                    }
                     registerHost(self, cmpMeta);
                     if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
                         // this component is using shadow dom
@@ -2421,6 +3327,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        // Apply CSP nonce to the style tag if it exists
+        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+        if (nonce != null) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
         head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
@@ -2473,6 +3384,13 @@ const getHostListenerTarget = (elm, flags) => {
 };
 // prettier-ignore
 const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -2698,6 +3616,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     });
 };
 const styles = /*@__PURE__*/ new Map();
+const modeResolutionChain = [];
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
 const H = (win.HTMLElement || class {
@@ -2765,6 +3684,6 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Build as B, Fragment as F, H, Host as a, bootstrapLazy as b, createEvent as c, readTask as d, getRenderingRef as e, forceUpdate as f, getElement as g, h, getAssetPath as i, consoleError as j, promiseResolve as p, registerInstance as r, writeTask as w };
+export { Build as B, Fragment as F, H, Host as a, bootstrapLazy as b, createEvent as c, readTask as d, getRenderingRef as e, forceUpdate as f, getElement as g, h, getAssetPath as i, consoleError as j, promiseResolve as p, registerInstance as r, setNonce as s, writeTask as w };
 
-//# sourceMappingURL=index-3c280603.js.map
+//# sourceMappingURL=index-44c85cc8.js.map