@jumpgroup/jump-design-system 0.1.6 → 0.1.8

package/dist/cjs/{index-46644e39.js → index-91a3ed32.js}

@@ -21,7 +21,6 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'jump-design-system';
-const BUILD = /* jump-design-system */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, 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: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -31,11 +30,9 @@ const BUILD = /* jump-design-system */ { allRenderFn: true, appendChildSlotFix:
  *
  * Modified for Stencil's renderer and slot projection
  */
-let contentRef;
+let scopeId;
 let hostTagName;
 let useNativeShadowDom = false;
-let checkSlotFallbackVisibility = false;
-let checkSlotRelocate = false;
 let isSvgMode = false;
 let queuePending = false;
 const createTime = (fnName, tagName = '') => {
@@ -68,6 +65,7 @@ const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
  * Don't add values to these!!
  */
 const EMPTY_OBJ = {};
+const isDef = (v) => v != null;
 /**
  * Check whether a value is a 'complex type', defined here as an object or a
  * function.
@@ -105,7 +103,6 @@ function queryNonceMetaTagContent(doc) {
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
     let key = null;
-    let slotName = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -136,9 +133,6 @@ const h = (nodeName, vnodeData, ...children) => {
         if (vnodeData.key) {
             key = vnodeData.key;
         }
-        if (vnodeData.name) {
-            slotName = vnodeData.name;
-        }
         // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
@@ -160,9 +154,6 @@ const h = (nodeName, vnodeData, ...children) => {
     {
         vnode.$key$ = key;
     }
-    {
-        vnode.$name$ = slotName;
-    }
     return vnode;
 };
 /**
@@ -187,9 +178,6 @@ const newVNode = (tag, text) => {
     {
         vnode.$key$ = null;
     }
-    {
-        vnode.$name$ = null;
-    }
     return vnode;
 };
 const Host = {};
@@ -320,8 +308,20 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
 const attachStyles = (hostRef) => {
     const cmpMeta = hostRef.$cmpMeta$;
     const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    addStyle(elm.getRootNode(), cmpMeta);
+    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');
+    }
     endAttachStyles();
 };
 const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
@@ -447,36 +447,22 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     let i = 0;
     let elm;
     let childNode;
-    let oldVNode;
-    if (!useNativeShadowDom) {
-        // remember for later we need to check to relocate nodes
-        checkSlotRelocate = true;
-        if (newVNode.$tag$ === 'slot') {
-            newVNode.$flags$ |= newVNode.$children$
-                ? // slot element has fallback content
-                    2 /* VNODE_FLAGS.isSlotFallback */
-                : // slot element does not have fallback content
-                    1 /* VNODE_FLAGS.isSlotReference */;
-        }
-    }
     if (newVNode.$text$ !== null) {
         // create text node
         elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
     }
-    else if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
-        // create a slot reference node
-        elm = newVNode.$elm$ =
-            doc.createTextNode('');
-    }
     else {
         // create element
-        elm = newVNode.$elm$ = (doc.createElement(newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
-                ? 'slot-fb'
-                : newVNode.$tag$));
+        elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
         // add css classes, attrs, props, listeners, etc.
         {
             updateElement(null, newVNode, isSvgMode);
         }
+        if (isDef(scopeId) && elm['s-si'] !== scopeId) {
+            // if there is a scopeId and this is the initial render
+            // then let's add the scopeId as a css class
+            elm.classList.add((elm['s-si'] = scopeId));
+        }
         if (newVNode.$children$) {
             for (i = 0; i < newVNode.$children$.length; ++i) {
                 // create the node
@@ -492,50 +478,8 @@ 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;
-    {
-        if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
-            // remember the content reference comment
-            elm['s-sr'] = true;
-            // remember the content reference comment
-            elm['s-cr'] = contentRef;
-            // remember the slot name, or empty string for default slot
-            elm['s-sn'] = newVNode.$name$ || '';
-            // 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);
-                }
-            }
-        }
-    }
     return elm;
 };
-const putBackInOriginalLocation = (parentElm, recursive) => {
-    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']) {
-            // 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
-            childNode['s-ol'].remove();
-            childNode['s-ol'] = undefined;
-            // Reset so we can correctly move the node around again.
-            childNode['s-sh'] = undefined;
-            checkSlotRelocate = true;
-        }
-        if (recursive) {
-            putBackInOriginalLocation(childNode, recursive);
-        }
-    }
-    plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-};
 /**
  * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
  * add them to the DOM in the appropriate place.
@@ -552,14 +496,17 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
  * creating DOM nodes (inclusive)
  */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-    let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
+    let containerElm = (parentElm);
     let childNode;
+    if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+        containerElm = containerElm.shadowRoot;
+    }
     for (; startIdx <= endIdx; ++startIdx) {
         if (vnodes[startIdx]) {
             childNode = createElm(null, parentVNode, startIdx);
             if (childNode) {
                 vnodes[startIdx].$elm$ = childNode;
-                containerElm.insertBefore(childNode, referenceNode(before) );
+                containerElm.insertBefore(childNode, before);
             }
         }
     }
@@ -581,20 +528,6 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
         if (vnode) {
             const elm = vnode.$elm$;
             if (elm) {
-                {
-                    // we're removing this element
-                    // so it's possible we need to show slot fallback content now
-                    checkSlotFallbackVisibility = true;
-                    if (elm['s-ol']) {
-                        // remove the original location comment
-                        elm['s-ol'].remove();
-                    }
-                    else {
-                        // it's possible that child nodes of the node
-                        // that's being removed are slot nodes
-                        putBackInOriginalLocation(elm, true);
-                    }
-                }
                 // remove the vnode's element from the dom
                 elm.remove();
             }
@@ -715,23 +648,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-            // case: "Vnode moved right"
-            //
-            // We've found that the last node in our window on the new children is
-            // the same VNode as the _first_ node in our window on the old children
-            // we're dealing with now. Visually, this is the layout of these two
-            // nodes:
-            //
-            // newCh: [..., newStartVnode , ... , newEndVnode , ...]
-            //                                    ^^^^^^^^^^^
-            // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
-            //              ^^^^^^^^^^^^^
-            //
-            // In this situation we need to patch `newEndVnode` onto `oldStartVnode`
-            // and move the DOM element for `oldStartVnode`.
-            if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
-                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
-            }
             patch(oldStartVnode, newEndVnode, isInitialRender);
             // We need to move the element for `oldStartVnode` into a position which
             // will be appropriate for `newEndVnode`. For this we can use
@@ -755,24 +671,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-            // case: "Vnode moved left"
-            //
-            // We've found that the first node in our window on the new children is
-            // the same VNode as the _last_ node in our window on the old children.
-            // Visually, this is the layout of these two nodes:
-            //
-            // newCh: [..., newStartVnode , ... , newEndVnode , ...]
-            //              ^^^^^^^^^^^^^
-            // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
-            //                                    ^^^^^^^^^^^
-            //
-            // In this situation we need to patch `newStartVnode` onto `oldEndVnode`
-            // (which will handle updating any changed attributes, reconciling their
-            // children etc) but we also need to move the DOM node to which
-            // `oldEndVnode` corresponds.
-            if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
-                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
-            }
             patch(oldEndVnode, newStartVnode, isInitialRender);
             // We've already checked above if `oldStartVnode` and `newStartVnode` are
             // the same node, so since we're here we know that they are not. Thus we
@@ -829,7 +727,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
             if (node) {
                 // if we created a new node then handle inserting it to the DOM
                 {
-                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+                    oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
                 }
             }
         }
@@ -868,9 +766,6 @@ const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
-        if (leftVNode.$tag$ === 'slot') {
-            return leftVNode.$name$ === rightVNode.$name$;
-        }
         // this will be set if JSX tags in the build have `key` attrs set on them
         // we only want to check this if we're not on the first render since on
         // first render `leftVNode.$key$` will always be `null`, so we can be led
@@ -883,14 +778,6 @@ const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     }
     return false;
 };
-const referenceNode = (node) => {
-    // this node was relocated to a new location in the dom
-    // because of some other component's slot
-    // but we still have an html comment in place of where
-    // it's original location was according to it's original vdom
-    return (node && node['s-ol']) || node;
-};
-const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
 /**
  * Handle reconciling an outdated VNode with a new one which corresponds to
  * it. This function handles flushing updates to the DOM and reconciling the
@@ -906,7 +793,6 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
     const newChildren = newVNode.$children$;
     const tag = newVNode.$tag$;
     const text = newVNode.$text$;
-    let defaultHolder;
     if (text === null) {
         {
             if (tag === 'slot' && !useNativeShadowDom) ;
@@ -936,193 +822,12 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
             removeVnodes(oldChildren, 0, oldChildren.length - 1);
         }
     }
-    else if ((defaultHolder = elm['s-cr'])) {
-        // this element has slotted content
-        defaultHolder.parentNode.textContent = text;
-    }
     else if (oldVNode.$text$ !== text) {
         // update the text content for the text only vnode
         // and also only if the text is different than before
         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) => {
-    const childNodes = elm.childNodes;
-    for (const childNode of childNodes) {
-        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'];
-                // 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;
-                            }
-                        }
-                        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;
-                            }
-                        }
-                    }
-                }
-            }
-            // keep drilling down
-            updateFallbackSlotVisibility(childNode);
-        }
-    }
-};
-/**
- * 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) => {
-    // tslint:disable-next-line: prefer-const
-    let node;
-    let hostContentNodes;
-    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
-        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
-            hostContentNodes = node.parentNode.childNodes;
-            const slotName = childNode['s-sn'];
-            // iterate through all the nodes under the location where the host was
-            // originally rendered
-            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)) {
-                        // it's possible we've already decided to relocate this node
-                        let 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;
-                        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!
-                            relocateNodeData.$slotRefNode$ = childNode;
-                        }
-                        else {
-                            node['s-sh'] = childNode['s-hn'];
-                            // add to our list of nodes to relocate
-                            relocateNodes.push({
-                                $slotRefNode$: childNode,
-                                $nodeToRelocate$: node,
-                            });
-                        }
-                        if (node['s-sr']) {
-                            relocateNodes.map((relocateNode) => {
-                                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
-                                    relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
-                                    if (relocateNodeData && !relocateNode.$slotRefNode$) {
-                                        relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
-                                    }
-                                }
-                            });
-                        }
-                    }
-                    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
-                        relocateNodes.push({
-                            $nodeToRelocate$: node,
-                        });
-                    }
-                }
-            }
-        }
-        // 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);
-        }
-    }
-};
-/**
- * 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) => {
-    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
-            return true;
-        }
-        if (nodeToRelocate.getAttribute('slot') === slotName) {
-            return true;
-        }
-        return false;
-    }
-    if (nodeToRelocate['s-sn'] === slotName) {
-        return true;
-    }
-    return slotName === '';
-};
 /**
  * The main entry point for Stencil's virtual DOM-based rendering engine
  *
@@ -1137,7 +842,6 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
  * @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 hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -1176,113 +880,13 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
-    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
-    useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
+    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
     {
-        contentRef = hostElm['s-cr'];
-        // always reset
-        checkSlotFallbackVisibility = false;
+        scopeId = hostElm['s-sc'];
     }
+    useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
     // synchronous patch
     patch(oldVNode, rootVnode, isInitialLoad);
-    {
-        // while we're moving nodes around existing nodes, temporarily disable
-        // the disconnectCallback from working
-        plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-        if (checkSlotRelocate) {
-            markSlotContentForRelocation(rootVnode.$elm$);
-            for (const relocateData of relocateNodes) {
-                const 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['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;
-                                }
-                            }
-                            orgLocationNode = orgLocationNode.previousSibling;
-                        }
-                    }
-                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
-                        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
-                        if (nodeToRelocate !== insertBeforeNode) {
-                            if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have its hostname set
-                                nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
-                            }
-                            // Add it back to the dom but in its new home
-                            // If we get to this point and `insertBeforeNode` is `null`, that means
-                            // we're just going to append the node as the last child of the parent. Passing
-                            // `null` as the second arg here will trigger that behavior.
-                            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;
-                    }
-                }
-            }
-        }
-        if (checkSlotFallbackVisibility) {
-            updateFallbackSlotVisibility(rootVnode.$elm$);
-        }
-        // done moving nodes around
-        // allow the disconnect callback to work again
-        plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-        // always reset
-        relocateNodes.length = 0;
-    }
-    // Clear the content ref so we don't create a memory leak
-    contentRef = undefined;
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1771,16 +1375,6 @@ const connectedCallback = (elm) => {
         if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
             // first time this component has connected
             hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
-            {
-                // 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
-                // host element has been connected to the DOM
-                if ((// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
-                        cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
-                    setContentReference(elm);
-                }
-            }
             {
                 // find the first ancestor component (if there is one) and register
                 // this component as one of the actively loading child components for its ancestor
@@ -1821,17 +1415,6 @@ const connectedCallback = (elm) => {
         endConnected();
     }
 };
-const setContentReference = (elm) => {
-    // 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
-    const contentRefElm = (elm['s-cr'] = doc.createComment(''));
-    contentRefElm['s-cn'] = true;
-    elm.insertBefore(contentRefElm, elm.firstChild);
-};
 const disconnectInstance = (instance) => {
 };
 const disconnectedCallback = async (elm) => {
@@ -1885,6 +1468,17 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     super(self);
                     self = this;
                     registerHost(self, cmpMeta);
+                    if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
+                        // this component is using shadow dom
+                        // and this browser supports shadow dom
+                        // add the read-only property "shadowRoot" to the host element
+                        // adding the shadow root build conditionals to minimize runtime
+                        {
+                            {
+                                self.attachShadow({ mode: 'open' });
+                            }
+                        }
+                    }
                 }
                 connectedCallback() {
                     if (appLoadFallback) {
@@ -2108,4 +1702,4 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-46644e39.js.map
+//# sourceMappingURL=index-91a3ed32.js.map