@watermarkinsights/ripple 4.2.0-1 → 4.2.0

package/dist/cjs/{index-f8ef86de.js → index-fae02cd7.js}

@@ -21,7 +21,6 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'ripple';
-const BUILD = /* ripple */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: true, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -54,13 +53,6 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
-/**
- * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
- *
- * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
- * support as of Stencil v4.
- */
-const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
  * Default style mode id
@@ -141,13 +133,13 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
-        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -298,9 +290,9 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     }
     styles.set(scopeId, style);
 };
-const addStyle = (styleContainerNode, cmpMeta, mode) => {
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     var _a;
-    const scopeId = getScopeId(cmpMeta);
+    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
@@ -315,8 +307,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
             }
             if (!appliedStyles.has(scopeId)) {
                 {
-                    styleElm = doc.createElement('style');
-                    styleElm.innerHTML = style;
+                    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
+                    {
+                        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) {
@@ -324,10 +319,6 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
-                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
-                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
-                    styleElm.innerHTML += SLOT_FB_CSS;
-                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -345,6 +336,7 @@ const attachStyles = (hostRef) => {
     const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
     const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
+    // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
     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
@@ -367,21 +359,6 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  *
  * Modified for Stencil's compiler and vdom
  */
-/**
- * When running a VDom render set properties present on a VDom node onto the
- * corresponding HTML element.
- *
- * Note that this function has special functionality for the `class`,
- * `style`, `key`, and `ref` attributes, as well as event handlers (like
- * `onClick`, etc). All others are just passed through as-is.
- *
- * @param elm the HTMLElement onto which attributes should be set
- * @param memberName the name of the attribute to set
- * @param oldValue the old value for the attribute
- * @param newValue the new value for the attribute
- * @param isSvg whether we're in an svg context or not
- * @param flags bitflags for Vdom variables
- */
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
@@ -458,19 +435,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 // except for the first character, we keep the event name case
                 memberName = ln[2] + memberName.slice(3);
             }
-            if (oldValue || newValue) {
-                // Need to account for "capture" events.
-                // If the event name ends with "Capture", we'll update the name to remove
-                // the "Capture" suffix and make sure the event listener is setup to handle the capture event.
-                const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-                // Make sure we only replace the last instance of "Capture"
-                memberName = memberName.replace(CAPTURE_EVENT_REGEX, '');
-                if (oldValue) {
-                    plt.rel(elm, memberName, oldValue, capture);
-                }
-                if (newValue) {
-                    plt.ael(elm, memberName, newValue, capture);
-                }
+            if (oldValue) {
+                plt.rel(elm, memberName, oldValue, false);
+            }
+            if (newValue) {
+                plt.ael(elm, memberName, newValue, false);
             }
         }
         else {
@@ -492,11 +461,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) {
-                    /**
-                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
-                     */
-                }
+                catch (e) { }
             }
             /**
              * Need to manually update attribute if:
@@ -535,14 +500,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
-/**
- * Parsed a string of classnames into an array
- * @param value className string, e.g. "foo bar baz"
- * @returns list of classes, e.g. ["foo", "bar", "baz"]
- */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
-const CAPTURE_EVENT_SUFFIX = 'Capture';
-const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
 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
@@ -576,7 +534,6 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
  * @returns the newly created node
  */
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
-    var _a;
     // tslint:disable-next-line: prefer-const
     const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
@@ -650,15 +607,11 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             }
         }
     }
-    // This needs to always happen so we can hide nodes that are projected
-    // to another component but don't end up in a slot
-    elm['s-hn'] = hostTagName;
     {
+        elm['s-hn'] = hostTagName;
         if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
             // remember the content reference comment
             elm['s-sr'] = true;
-            // Persist the name of the slot that this slot was going to be projected into.
-            elm['s-fs'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.slot;
             // remember the content reference comment
             elm['s-cr'] = contentRef;
             // remember the slot name, or empty string for default slot
@@ -666,38 +619,30 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             // check if we've got an old vnode for this slot
             oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
             if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
-                {
-                    // we've got an old slot vnode and the wrapper is being replaced
-                    // so let's move the old slot content back to its original location
-                    putBackInOriginalLocation(oldParentVNode.$elm$, false);
-                }
+                // we've got an old slot vnode and the wrapper is being replaced
+                // so let's move the old slot content back to it's original location
+                putBackInOriginalLocation(oldParentVNode.$elm$, false);
             }
         }
     }
     return elm;
 };
 const putBackInOriginalLocation = (parentElm, recursive) => {
-    var _a;
     plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
     const oldSlotChildNodes = parentElm.childNodes;
     for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
         const childNode = oldSlotChildNodes[i];
         if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
+            // // this child node in the old element is from another component
+            // // remove this node from the old slot's parent
+            // childNode.remove();
             // and relocate it back to it's original location
             parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
             // remove the old original location comment entirely
             // later on the patch function will know what to do
-            // and move this to the correct spot if need be
+            // and move this to the correct spot in need be
             childNode['s-ol'].remove();
             childNode['s-ol'] = undefined;
-            // Reset so we can correctly move the node around again.
-            childNode['s-sh'] = undefined;
-            // When putting an element node back in its original location,
-            // we need to reset the `slot` attribute back to the value it originally had
-            // so we can correctly relocate it again in the future
-            if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-                childNode.setAttribute('slot', (_a = childNode['s-sn']) !== null && _a !== void 0 ? _a : '');
-            }
             checkSlotRelocate = true;
         }
         if (recursive) {
@@ -1121,53 +1066,42 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
-/**
- * Adjust the `.hidden` property as-needed on any nodes in a DOM subtree which
- * are slot fallbacks nodes.
- *
- * A slot fallback node should be visible by default. Then, it should be
- * conditionally hidden if:
- *
- * - it has a sibling with a `slot` property set to its slot name or if
- * - it is a default fallback slot node, in which case we hide if it has any
- *   content
- *
- * @param elm the element of interest
- */
 const updateFallbackSlotVisibility = (elm) => {
+    // tslint:disable-next-line: prefer-const
     const childNodes = elm.childNodes;
-    for (const childNode of 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.nodeType === 1 /* NODE_TYPE.ElementNode */) {
             if (childNode['s-sr']) {
                 // this is a slot fallback node
                 // get the slot name for this slot reference node
-                const slotName = childNode['s-sn'];
+                slotNameAttr = childNode['s-sn'];
                 // by default always show a fallback slot node
                 // then hide it if there are other slots in the light dom
                 childNode.hidden = false;
-                // we need to check all of its sibling nodes in order to see if
-                // `childNode` should be hidden
-                for (const siblingNode of childNodes) {
-                    // Don't check the node against itself
-                    if (siblingNode !== childNode) {
-                        if (siblingNode['s-hn'] !== childNode['s-hn'] || slotName !== '') {
-                            // this sibling node is from a different component OR is a named
-                            // fallback slot node
-                            if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
-                                (slotName === siblingNode.getAttribute('slot') || slotName === siblingNode['s-sn'])) {
-                                childNode.hidden = true;
-                                break;
-                            }
+                for (j = 0; j < ilen; j++) {
+                    nodeType = childNodes[j].nodeType;
+                    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].getAttribute('slot')) {
+                            childNode.hidden = true;
+                            break;
                         }
-                        else {
-                            // this is a default fallback slot node
-                            // any element or text node (with content)
-                            // should hide the default fallback slot node
-                            if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ ||
-                                (siblingNode.nodeType === 3 /* NODE_TYPE.TextNode */ && siblingNode.textContent.trim() !== '')) {
-                                childNode.hidden = true;
-                                break;
-                            }
+                    }
+                    else {
+                        // 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].textContent.trim() !== '')) {
+                            childNode.hidden = true;
+                            break;
                         }
                     }
                 }
@@ -1177,67 +1111,45 @@ const updateFallbackSlotVisibility = (elm) => {
         }
     }
 };
-/**
- * Component-global information about nodes which are either currently being
- * relocated or will be shortly.
- */
 const relocateNodes = [];
-/**
- * Mark the contents of a slot for relocation via adding references to them to
- * the {@link relocateNodes} data structure. The actual work of relocating them
- * will then be handled in {@link renderVdom}.
- *
- * @param elm a render node whose child nodes need to be relocated
- */
-const markSlotContentForRelocation = (elm) => {
+const relocateSlotContent = (elm) => {
     // tslint:disable-next-line: prefer-const
+    let childNode;
     let node;
     let hostContentNodes;
+    let slotNameAttr;
+    let relocateNodeData;
     let j;
-    for (const childNode of elm.childNodes) {
-        // we need to find child nodes which are slot references so we can then try
-        // to match them up with nodes that need to be relocated
+    let i = 0;
+    const childNodes = elm.childNodes;
+    const ilen = childNodes.length;
+    for (; i < ilen; i++) {
+        childNode = childNodes[i];
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
-            // first get the content reference comment node ('s-cr'), then we get
-            // its parent, which is where all the host content is now
+            // first got the content reference comment node
+            // then we got it's parent, which is where all the host content is in now
             hostContentNodes = node.parentNode.childNodes;
-            const slotName = childNode['s-sn'];
-            // iterate through all the nodes under the location where the host was
-            // originally rendered
+            slotNameAttr = childNode['s-sn'];
             for (j = hostContentNodes.length - 1; j >= 0; j--) {
                 node = hostContentNodes[j];
-                // check that the node is not a content reference node or a node
-                // reference and then check that the host name does not match that of
-                // childNode.
-                // In addition, check that the slot either has not already been relocated, or
-                // that its current location's host is not childNode's host. This is essentially
-                // a check so that we don't try to relocate (and then hide) a node that is already
-                // where it should be.
-                if (!node['s-cn'] &&
-                    !node['s-nr'] &&
-                    node['s-hn'] !== childNode['s-hn'] &&
-                    (!BUILD.experimentalSlotFixes  )) {
-                    // if `node` is located in the slot that `childNode` refers to (via the
-                    // `'s-sn'` property) then we need to relocate it from it's current spot
-                    // (under the host element parent) to the right slot location
-                    if (isNodeLocatedInSlot(node, slotName)) {
+                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
+                    // let's do some relocating to its new home
+                    // but never relocate a content reference node
+                    // that is suppose to always represent the original content location
+                    if (isNodeLocatedInSlot(node, slotNameAttr)) {
                         // it's possible we've already decided to relocate this node
-                        let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                         // made some changes to slots
                         // let's make sure we also double check
                         // fallbacks are correctly hidden or shown
                         checkSlotFallbackVisibility = true;
-                        // ensure that the slot-name attr is correct
-                        node['s-sn'] = node['s-sn'] || slotName;
+                        node['s-sn'] = node['s-sn'] || slotNameAttr;
                         if (relocateNodeData) {
-                            relocateNodeData.$nodeToRelocate$['s-sh'] = childNode['s-hn'];
-                            // we marked this node for relocation previously but didn't find
-                            // out the slot reference node to which it needs to be relocated
-                            // so write it down now!
+                            // previously we never found a slot home for this node
+                            // but turns out we did, so let's remember it now
                             relocateNodeData.$slotRefNode$ = childNode;
                         }
                         else {
-                            node['s-sh'] = childNode['s-hn'];
                             // add to our list of nodes to relocate
                             relocateNodes.push({
                                 $slotRefNode$: childNode,
@@ -1256,10 +1168,8 @@ const markSlotContentForRelocation = (elm) => {
                         }
                     }
                     else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
-                        // the node is not found within the slot (`childNode`) that we're
-                        // currently looking at, so we stick it into `relocateNodes` to
-                        // handle later. If we never find a home for this element then
-                        // we'll need to hide it
+                        // so far this element does not have a slot home, not setting slotRefNode on purpose
+                        // if we never find a home for this element then we'll need to hide it
                         relocateNodes.push({
                             $nodeToRelocate$: node,
                         });
@@ -1267,41 +1177,30 @@ const markSlotContentForRelocation = (elm) => {
                 }
             }
         }
-        // if we're dealing with any type of element (capable of itself being a
-        // slot reference or containing one) then we recur
         if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-            markSlotContentForRelocation(childNode);
+            relocateSlotContent(childNode);
         }
     }
 };
-/**
- * Check whether a node is located in a given named slot.
- *
- * @param nodeToRelocate the node of interest
- * @param slotName the slot name to check
- * @returns whether the node is located in the slot or not
- */
-const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
+const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
     if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-        if (nodeToRelocate.getAttribute('slot') === null && slotName === '') {
-            // if the node doesn't have a slot attribute, and the slot we're checking
-            // is not a named slot, then we assume the node should be within the slot
+        if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
             return true;
         }
-        if (nodeToRelocate.getAttribute('slot') === slotName) {
+        if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
             return true;
         }
         return false;
     }
-    if (nodeToRelocate['s-sn'] === slotName) {
+    if (nodeToRelocate['s-sn'] === slotNameAttr) {
         return true;
     }
-    return slotName === '';
+    return slotNameAttr === '';
 };
 /**
- * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
- * them with `null`. This signals that the DOM element corresponding to the VDom
- * node has been removed from the DOM.
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
+ * calling them with `null`. This signals that the DOM element corresponding to
+ * the VDom node has been removed from the DOM.
  *
  * @param vNode a virtual DOM node
  */
@@ -1322,45 +1221,17 @@ const nullifyVNodeRefs = (vNode) => {
  * @param hostRef data needed to root and render the virtual DOM tree, such as
  * the DOM node into which it should be rendered.
  * @param renderFnResults the virtual DOM nodes to be rendered
- * @param isInitialLoad whether or not this is the first call after page load
  */
-const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-    var _a, _b, _c, _d;
+const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-    // if `renderFnResults` is a Host node then we can use it directly. If not,
-    // we need to call `h` again to wrap the children of our component in a
-    // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
-    // implicitly that the top-level vdom node is 1) an only child and 2)
-    // contains attrs that need to be set on the host element.
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
     if (cmpMeta.$attrsToReflect$) {
         rootVnode.$attrs$ = rootVnode.$attrs$ || {};
         cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
     }
-    // On the first render and *only* on the first render we want to check for
-    // any attributes set on the host element which are also set on the vdom
-    // node. If we find them, we override the value on the VDom node attrs with
-    // the value from the host element, which allows developers building apps
-    // with Stencil components to override e.g. the `role` attribute on a
-    // component even if it's already set on the `Host`.
-    if (isInitialLoad && rootVnode.$attrs$) {
-        for (const key of Object.keys(rootVnode.$attrs$)) {
-            // We have a special implementation in `setAccessor` for `style` and
-            // `class` which reconciles values coming from the VDom with values
-            // already present on the DOM element, so we don't want to override those
-            // attributes on the VDom tree with values from the host element if they
-            // are present.
-            //
-            // Likewise, `ref` and `key` are special internal values for the Stencil
-            // runtime and we don't want to override those either.
-            if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
-                rootVnode.$attrs$[key] = hostElm[key];
-            }
-        }
-    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -1381,48 +1252,43 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         // the disconnectCallback from working
         plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
         if (checkSlotRelocate) {
-            markSlotContentForRelocation(rootVnode.$elm$);
-            for (const relocateData of relocateNodes) {
-                const nodeToRelocate = relocateData.$nodeToRelocate$;
+            relocateSlotContent(rootVnode.$elm$);
+            let relocateData;
+            let nodeToRelocate;
+            let orgLocationNode;
+            let parentNodeRef;
+            let insertBeforeNode;
+            let refNode;
+            let i = 0;
+            for (; i < relocateNodes.length; i++) {
+                relocateData = relocateNodes[i];
+                nodeToRelocate = relocateData.$nodeToRelocate$;
                 if (!nodeToRelocate['s-ol']) {
                     // add a reference node marking this node's original location
                     // keep a reference to this node for later lookups
-                    const orgLocationNode = doc.createTextNode('');
+                    orgLocationNode =
+                        doc.createTextNode('');
                     orgLocationNode['s-nr'] = nodeToRelocate;
                     nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
                 }
             }
-            for (const relocateData of relocateNodes) {
-                const nodeToRelocate = relocateData.$nodeToRelocate$;
-                const slotRefNode = relocateData.$slotRefNode$;
-                if (slotRefNode) {
-                    const parentNodeRef = slotRefNode.parentNode;
-                    // When determining where to insert content, the most simple case would be
-                    // to relocate the node immediately following the slot reference node. We do this
-                    // by getting a reference to the node immediately following the slot reference node
-                    // since we will use `insertBefore` to manipulate the DOM.
-                    //
-                    // If there is no node immediately following the slot reference node, then we will just
-                    // end up appending the node as the last child of the parent.
-                    let insertBeforeNode = slotRefNode.nextSibling;
-                    // If the node we're currently planning on inserting the new node before is an element,
-                    // we need to do some additional checks to make sure we're inserting the node in the correct order.
-                    // The use case here would be that we have multiple nodes being relocated to the same slot. So, we want
-                    // to make sure they get inserted into their new how in the same order they were declared in their original location.
-                    //
-                    // TODO(STENCIL-914): Remove `experimentalSlotFixes` check
-                    {
-                        let orgLocationNode = (_a = nodeToRelocate['s-ol']) === null || _a === void 0 ? void 0 : _a.previousSibling;
-                        while (orgLocationNode) {
-                            let refNode = (_b = orgLocationNode['s-nr']) !== null && _b !== void 0 ? _b : null;
-                            if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
-                                refNode = refNode.nextSibling;
-                                if (!refNode || !refNode['s-nr']) {
-                                    insertBeforeNode = refNode;
-                                    break;
-                                }
+            for (i = 0; i < relocateNodes.length; i++) {
+                relocateData = relocateNodes[i];
+                nodeToRelocate = relocateData.$nodeToRelocate$;
+                if (relocateData.$slotRefNode$) {
+                    // by default we're just going to insert it directly
+                    // after the slot reference node
+                    parentNodeRef = relocateData.$slotRefNode$.parentNode;
+                    insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
+                    orgLocationNode = nodeToRelocate['s-ol'];
+                    while ((orgLocationNode = orgLocationNode.previousSibling)) {
+                        refNode = orgLocationNode['s-nr'];
+                        if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
+                            refNode = refNode.nextSibling;
+                            if (!refNode || !refNode['s-nr']) {
+                                insertBeforeNode = refNode;
+                                break;
                             }
-                            orgLocationNode = orgLocationNode.previousSibling;
                         }
                     }
                     if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
@@ -1432,32 +1298,17 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                         // has a different next sibling or parent relocated
                         if (nodeToRelocate !== insertBeforeNode) {
                             if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have its hostname set
+                                // probably a component in the index.html that doesn't have it's hostname set
                                 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
                             }
-                            // Add it back to the dom but in its new home
-                            // If we get to this point and `insertBeforeNode` is `null`, that means
-                            // we're just going to append the node as the last child of the parent. Passing
-                            // `null` as the second arg here will trigger that behavior.
+                            // add it back to the dom but in its new home
                             parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
-                            // Reset the `hidden` value back to what it was defined as originally
-                            // This solves a problem where a `slot` is dynamically rendered and `hidden` may have
-                            // been set on content originally, but now it has a slot to go to so it should have
-                            // the value it was defined as having in the DOM, not what we overrode it to.
-                            if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-                                nodeToRelocate.hidden = (_c = nodeToRelocate['s-ih']) !== null && _c !== void 0 ? _c : false;
-                            }
                         }
                     }
                 }
                 else {
                     // this node doesn't have a slot home to go to, so let's hide it
                     if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-                        // Store the initial value of `hidden` so we can reset it later when
-                        // moving nodes around.
-                        if (isInitialLoad) {
-                            nodeToRelocate['s-ih'] = (_d = nodeToRelocate.hidden) !== null && _d !== void 0 ? _d : false;
-                        }
                         nodeToRelocate.hidden = true;
                     }
                 }
@@ -1578,16 +1429,6 @@ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.th
  */
 const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
     (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
-/**
- * Update a component given reference to its host elements and so on.
- *
- * @param hostRef an object containing references to the element's host node,
- * VDom nodes, and other metadata
- * @param instance a reference to the underlying host element where it will be
- * rendered
- * @param isInitialLoad whether or not this function is being called as part of
- * the first render cycle
- */
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
     var _a;
     const elm = hostRef.$hostElement$;
@@ -1599,7 +1440,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     }
     const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     {
-        callRender(hostRef, instance, elm, isInitialLoad);
+        callRender(hostRef, instance);
     }
     if (rc) {
         // ok, so turns out there are some child host elements
@@ -1623,24 +1464,8 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         }
     }
 };
-/**
- * Handle making the call to the VDom renderer with the proper context given
- * various build variables
- *
- * @param hostRef an object containing references to the element's host node,
- * VDom nodes, and other metadata
- * @param instance a reference to the underlying host element where it will be
- * rendered
- * @param elm the Host element for the component
- * @param isInitialLoad whether or not this function is being called as part of
- * @returns an empty promise
- */
-const callRender = (hostRef, instance, elm, isInitialLoad) => {
+const callRender = (hostRef, instance, elm) => {
     try {
-        /**
-         * minification optimization: `allRenderFn` is `true` if all components have a `render`
-         * method, so we can call the method immediately. If not, check before calling it.
-         */
         instance = instance.render && instance.render();
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1654,7 +1479,7 @@ const callRender = (hostRef, instance, elm, isInitialLoad) => {
                 // or we need to update the css class/attrs on the host element
                 // DOM WRITE!
                 {
-                    renderVdom(hostRef, instance, isInitialLoad);
+                    renderVdom(hostRef, instance);
                 }
             }
         }
@@ -1735,16 +1560,6 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
-/**
- * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
- * e.g. custom element node. If a build figures out that e.g. no component
- * has a `componentDidLoad` method, the instance method gets removed from the
- * output bundle and this function returns `undefined`.
- * @param instance any object that may or may not contain methods
- * @param method method name
- * @param arg single arbitrary argument
- * @returns result of method call if it exists, otherwise `undefined`
- */
 const safeCall = (instance, method, arg) => {
     if (instance && instance[method]) {
         try {
@@ -1812,14 +1627,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
-    var _a;
-    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
         }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
+        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1842,18 +1656,16 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 // proxyComponent - method
                 Object.defineProperty(prototype, memberName, {
                     value(...args) {
-                        var _a;
                         const ref = getHostRef(this);
-                        return (_a = ref === null || ref === void 0 ? void 0 : ref.$onInstancePromise$) === null || _a === void 0 ? void 0 : _a.then(() => { var _a; return (_a = ref.$lazyInstance$) === null || _a === void 0 ? void 0 : _a[memberName](...args); });
+                        return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
                     },
                 });
             }
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
-                    var _a;
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
@@ -1875,12 +1687,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -1900,67 +1712,26 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
-                    else if (propName == null) {
-                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
-                        // on a vanilla web component
-                        const hostRef = getHostRef(this);
-                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
-                        // We only want to trigger the callback(s) if:
-                        // 1. The instance is ready
-                        // 2. The watchers are ready
-                        // 3. The value has changed
-                        if (flags &&
-                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
-                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
-                            newValue !== oldValue) {
-                            const instance = hostRef.$lazyInstance$ ;
-                            const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
-                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
-                                if (instance[callbackName] != null) {
-                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
-                                }
-                            });
-                        }
-                        return;
-                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // Create an array of attributes to observe
-            // This list in comprised of all strings used within a `@Watch()` decorator
-            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
-            // As such, there is no way to guarantee type-safety here that a user hasn't entered
-            // an invalid attribute.
-            Cstr.observedAttributes = Array.from(new Set([
-                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
-                ...members
-                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
-                    .map(([propName, m]) => {
-                    var _a;
-                    const attrName = m[1] || propName;
-                    attrNameToPropName.set(attrName, propName);
-                    if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                        (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
-                    }
-                    return attrName;
-                }),
-            ]));
+            // create an array of attributes to observe
+            // and also create a map of html attribute name to js property name
+            Cstr.observedAttributes = members
+                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
+                .map(([propName, m]) => {
+                const attrName = m[1] || propName;
+                attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
+                return attrName;
+            });
         }
     }
     return Cstr;
 };
-/**
- * Initialize a Stencil component given a reference to its host element, its
- * runtime bookkeeping data structure, runtime metadata about the component,
- * and (optionally) an HMR version ID.
- *
- * @param elm a host element
- * @param hostRef the element's runtime bookkeeping object
- * @param cmpMeta runtime metadata for the Stencil component
- * @param hmrVersionId an (optional) HMR version ID
- */
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
-    let Cstr;
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
@@ -2038,8 +1809,6 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         schedule();
     }
 };
-const fireConnectedCallback = (instance) => {
-};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -2053,7 +1822,7 @@ const connectedCallback = (elm) => {
                 // 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
                 // host element has been connected to the DOM
-                if ((// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+                if ((// TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
                         cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
                     setContentReference(elm);
                 }
@@ -2093,11 +1862,6 @@ const connectedCallback = (elm) => {
             // reattach any event listeners to the host
             // since they would have been removed when disconnected
             addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-            // fire off connectedCallback() on component instance
-            if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
-            else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
-                hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
-            }
         }
         endConnected();
     }
@@ -2113,9 +1877,7 @@ const setContentReference = (elm) => {
     contentRefElm['s-cn'] = true;
     elm.insertBefore(contentRefElm, elm.firstChild);
 };
-const disconnectInstance = (instance) => {
-};
-const disconnectedCallback = async (elm) => {
+const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
         {
@@ -2124,10 +1886,6 @@ const disconnectedCallback = async (elm) => {
                 hostRef.$rmListeners$ = undefined;
             }
         }
-        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
-        else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
-            hostRef.$onReadyPromise$.then(() => disconnectInstance());
-        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -2138,27 +1896,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const dataStyles = /*@__PURE__*/ doc.createElement('style');
+    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
-    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
-            var _a;
             const cmpMeta = {
                 $flags$: compactMeta[0],
                 $tagName$: compactMeta[1],
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
-            // Check if we are using slots outside the shadow DOM in this component.
-            // We'll use this information later to add styles for `slot-fb` elements
-            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
-                hasSlotRelocation = true;
-            }
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
@@ -2169,7 +1920,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$attrsToReflect$ = [];
             }
             {
-                cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
+                cmpMeta.$watchers$ = {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
@@ -2221,25 +1972,15 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
-    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
-    if (hasSlotRelocation) {
-        dataStyles.innerHTML += SLOT_FB_CSS;
-    }
-    // Add hydration styles
     {
-        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
-    }
-    // If we have styles, add them to the DOM
-    if (dataStyles.innerHTML.length) {
-        dataStyles.setAttribute('data-styles', '');
+        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) {
-            dataStyles.setAttribute('nonce', nonce);
+            visibilityStyle.setAttribute('nonce', nonce);
         }
-        // Insert the styles into the document head
-        // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
-        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
+        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -2297,40 +2038,13 @@ const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !==
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
-/**
- * A WeakMap mapping runtime component references to their corresponding host reference
- * instances.
- */
 const hostRefs = /*@__PURE__*/ new WeakMap();
-/**
- * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
- *
- * @param ref the runtime ref of interest
- * @returns the Host reference (if found) or undefined
- */
 const getHostRef = (ref) => hostRefs.get(ref);
-/**
- * Register a lazy instance with the {@link hostRefs} object so it's
- * corresponding {@link d.HostRef} can be retrieved later.
- *
- * @param lazyInstance the lazy instance of interest
- * @param hostRef that instances `HostRef` object
- * @returns a reference to the host ref WeakMap
- */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-/**
- * Register a host element for a Stencil component, setting up various metadata
- * and callbacks based on {@link BUILD} flags as well as the component's runtime
- * metadata.
- *
- * @param hostElement the host element to register
- * @param cmpMeta runtime metadata for that component
- * @returns a reference to the host ref WeakMap
- */
-const registerHost = (hostElement, cmpMeta) => {
+const registerHost = (elm, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: hostElement,
+        $hostElement$: elm,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
@@ -2339,11 +2053,11 @@ const registerHost = (hostElement, cmpMeta) => {
     }
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        hostElement['s-p'] = [];
-        hostElement['s-rc'] = [];
+        elm['s-p'] = [];
+        elm['s-rc'] = [];
     }
-    addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$);
-    return hostRefs.set(hostElement, hostRef);
+    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
+    return hostRefs.set(elm, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);
@@ -2431,7 +2145,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = (cb) => promiseResolve().then(cb);
+const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.Host = Host;