@nanoporetech-digital/components 3.7.0 → 3.8.0

package/dist/cjs/{index-41582c2a.js → index-5c437a69.js}

@@ -66,7 +66,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
@@ -82,6 +90,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)
@@ -90,7 +110,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) => {
@@ -181,6 +200,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),
@@ -212,394 +238,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);
@@ -610,7 +444,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;
@@ -618,6 +452,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;
@@ -630,16 +474,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)
@@ -663,7 +514,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)
@@ -693,10 +550,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)
@@ -717,66 +576,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;
@@ -788,31 +669,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;
@@ -825,14 +704,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();
@@ -842,7 +725,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;
@@ -865,7 +752,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;
@@ -873,7 +764,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;
@@ -889,110 +784,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$);
     }
 };
 /**
@@ -1069,30 +1926,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];
@@ -1459,7 +2327,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) {
@@ -1720,13 +2588,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;
@@ -1734,7 +2603,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
@@ -2272,7 +3141,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
@@ -2288,7 +3172,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));
@@ -2352,6 +3239,7 @@ const disconnectedCallback = (elm) => {
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -2360,10 +3248,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 = {
@@ -2393,6 +3287,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
@@ -2443,6 +3349,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
@@ -2495,6 +3406,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);
@@ -2720,6 +3638,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 {
@@ -2802,6 +3721,7 @@ exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.readTask = readTask;
 exports.registerInstance = registerInstance;
+exports.setNonce = setNonce;
 exports.writeTask = writeTask;
 
-//# sourceMappingURL=index-41582c2a.js.map
+//# sourceMappingURL=index-5c437a69.js.map