@lwc/synthetic-shadow 2.23.5 → 2.24.0

package/dist/synthetic-shadow.js

@@ -148,7 +148,7 @@ const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
 // We use this to detect symbol support in order to avoid the expensive symbol polyfill. Note that
 // we can't use typeof since it will fail when transpiling.
 const hasNativeSymbolSupport = /*@__PURE__*/ (() => Symbol('x').toString() === 'Symbol(x)')();
-/** version: 2.23.5 */
+/** version: 2.24.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -462,7 +462,7 @@ if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
 }
 const lwcRuntimeFlags = _globalThis.lwcRuntimeFlags;
-/** version: 2.23.5 */
+/** version: 2.24.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -543,201 +543,238 @@ function isNodeShadowed(node) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-// when finding a slot in the DOM, we can fold it if it is contained
 // inside another slot.
+
 function foldSlotElement(slot) {
-    let parent = parentElementGetter.call(slot);
-    while (!isNull(parent) && isSlotElement(parent)) {
-        slot = parent;
-        parent = parentElementGetter.call(slot);
-    }
-    return slot;
+  let parent = parentElementGetter.call(slot);
+
+  while (!isNull(parent) && isSlotElement(parent)) {
+    slot = parent;
+    parent = parentElementGetter.call(slot);
+  }
+
+  return slot;
 }
+
 function isNodeSlotted(host, node) {
-    if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(host instanceof HTMLElement, `isNodeSlotted() should be called with a host as the first argument instead of ${host}`);
-        assert.invariant(node instanceof _Node, `isNodeSlotted() should be called with a node as the second argument instead of ${node}`);
-        assert.invariant(compareDocumentPosition.call(node, host) & DOCUMENT_POSITION_CONTAINS, `isNodeSlotted() should never be called with a node that is not a child node of ${host}`);
-    }
-    const hostKey = getNodeKey(host);
-    // this routine assumes that the node is coming from a different shadow (it is not owned by the host)
-    // just in case the provided node is not an element
-    let currentElement = node instanceof Element ? node : parentElementGetter.call(node);
-    while (!isNull(currentElement) && currentElement !== host) {
-        const elmOwnerKey = getNodeNearestOwnerKey(currentElement);
-        const parent = parentElementGetter.call(currentElement);
-        if (elmOwnerKey === hostKey) {
-            // we have reached an element inside the host's template, and only if
-            // that element is an slot, then the node is considered slotted
-            return isSlotElement(currentElement);
-        }
-        else if (parent === host) {
-            return false;
-        }
-        else if (!isNull(parent) && getNodeNearestOwnerKey(parent) !== elmOwnerKey) {
-            // we are crossing a boundary of some sort since the elm and its parent
-            // have different owner key. for slotted elements, this is possible
-            // if the parent happens to be a slot.
-            if (isSlotElement(parent)) {
-                /**
-                 * the slot parent might be allocated inside another slot, think of:
-                 * <x-root> (<--- root element)
-                 *    <x-parent> (<--- own by x-root)
-                 *       <x-child> (<--- own by x-root)
-                 *           <slot> (<--- own by x-child)
-                 *               <slot> (<--- own by x-parent)
-                 *                  <div> (<--- own by x-root)
-                 *
-                 * while checking if x-parent has the div slotted, we need to traverse
-                 * up, but when finding the first slot, we skip that one in favor of the
-                 * most outer slot parent before jumping into its corresponding host.
-                 */
-                currentElement = getNodeOwner(foldSlotElement(parent));
-                if (!isNull(currentElement)) {
-                    if (currentElement === host) {
-                        // the slot element is a top level element inside the shadow
-                        // of a host that was allocated into host in question
-                        return true;
-                    }
-                    else if (getNodeNearestOwnerKey(currentElement) === hostKey) {
-                        // the slot element is an element inside the shadow
-                        // of a host that was allocated into host in question
-                        return true;
-                    }
-                }
-            }
-            else {
-                return false;
-            }
-        }
-        else {
-            currentElement = parent;
+  if (process.env.NODE_ENV !== 'production') {
+    assert.invariant(host instanceof HTMLElement, `isNodeSlotted() should be called with a host as the first argument instead of ${host}`);
+    assert.invariant(node instanceof _Node, `isNodeSlotted() should be called with a node as the second argument instead of ${node}`);
+    assert.invariant(compareDocumentPosition.call(node, host) & DOCUMENT_POSITION_CONTAINS, `isNodeSlotted() should never be called with a node that is not a child node of ${host}`);
+  }
+
+  const hostKey = getNodeKey(host); // this routine assumes that the node is coming from a different shadow (it is not owned by the host)
+  // just in case the provided node is not an element
+
+  let currentElement = node instanceof Element ? node : parentElementGetter.call(node);
+
+  while (!isNull(currentElement) && currentElement !== host) {
+    const elmOwnerKey = getNodeNearestOwnerKey(currentElement);
+    const parent = parentElementGetter.call(currentElement);
+
+    if (elmOwnerKey === hostKey) {
+      // we have reached an element inside the host's template, and only if
+      // that element is an slot, then the node is considered slotted
+      return isSlotElement(currentElement);
+    } else if (parent === host) {
+      return false;
+    } else if (!isNull(parent) && getNodeNearestOwnerKey(parent) !== elmOwnerKey) {
+      // we are crossing a boundary of some sort since the elm and its parent
+      // have different owner key. for slotted elements, this is possible
+      // if the parent happens to be a slot.
+      if (isSlotElement(parent)) {
+        /**
+         * the slot parent might be allocated inside another slot, think of:
+         * <x-root> (<--- root element)
+         *    <x-parent> (<--- own by x-root)
+         *       <x-child> (<--- own by x-root)
+         *           <slot> (<--- own by x-child)
+         *               <slot> (<--- own by x-parent)
+         *                  <div> (<--- own by x-root)
+         *
+         * while checking if x-parent has the div slotted, we need to traverse
+         * up, but when finding the first slot, we skip that one in favor of the
+         * most outer slot parent before jumping into its corresponding host.
+         */
+        currentElement = getNodeOwner(foldSlotElement(parent));
+
+        if (!isNull(currentElement)) {
+          if (currentElement === host) {
+            // the slot element is a top level element inside the shadow
+            // of a host that was allocated into host in question
+            return true;
+          } else if (getNodeNearestOwnerKey(currentElement) === hostKey) {
+            // the slot element is an element inside the shadow
+            // of a host that was allocated into host in question
+            return true;
+          }
         }
+      } else {
+        return false;
+      }
+    } else {
+      currentElement = parent;
     }
-    return false;
+  }
+
+  return false;
 }
+
 function getNodeOwner(node) {
-    if (!(node instanceof _Node)) {
-        return null;
-    }
-    const ownerKey = getNodeNearestOwnerKey(node);
-    if (isUndefined(ownerKey)) {
-        return null;
-    }
-    let nodeOwner = node;
-    // At this point, node is a valid node with owner identity, now we need to find the owner node
-    // search for a custom element with a VM that owns the first element with owner identity attached to it
-    while (!isNull(nodeOwner) && getNodeKey(nodeOwner) !== ownerKey) {
-        nodeOwner = parentNodeGetter.call(nodeOwner);
-    }
-    if (isNull(nodeOwner)) {
-        return null;
-    }
-    return nodeOwner;
+  if (!(node instanceof _Node)) {
+    return null;
+  }
+
+  const ownerKey = getNodeNearestOwnerKey(node);
+
+  if (isUndefined(ownerKey)) {
+    return null;
+  }
+
+  let nodeOwner = node; // At this point, node is a valid node with owner identity, now we need to find the owner node
+  // search for a custom element with a VM that owns the first element with owner identity attached to it
+
+  while (!isNull(nodeOwner) && getNodeKey(nodeOwner) !== ownerKey) {
+    nodeOwner = parentNodeGetter.call(nodeOwner);
+  }
+
+  if (isNull(nodeOwner)) {
+    return null;
+  }
+
+  return nodeOwner;
 }
 function isSyntheticSlotElement(node) {
-    return isSlotElement(node) && isNodeShadowed(node);
+  return isSlotElement(node) && isNodeShadowed(node);
 }
 function isSlotElement(node) {
-    return node instanceof HTMLSlotElement;
+  return node instanceof HTMLSlotElement;
 }
 function isNodeOwnedBy(owner, node) {
-    if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(owner instanceof HTMLElement, `isNodeOwnedBy() should be called with an element as the first argument instead of ${owner}`);
-        assert.invariant(node instanceof _Node, `isNodeOwnedBy() should be called with a node as the second argument instead of ${node}`);
-        assert.invariant(compareDocumentPosition.call(node, owner) & DOCUMENT_POSITION_CONTAINS, `isNodeOwnedBy() should never be called with a node that is not a child node of ${owner}`);
-    }
-    const ownerKey = getNodeNearestOwnerKey(node);
-    return isUndefined(ownerKey) || getNodeKey(owner) === ownerKey;
+  if (process.env.NODE_ENV !== 'production') {
+    assert.invariant(owner instanceof HTMLElement, `isNodeOwnedBy() should be called with an element as the first argument instead of ${owner}`);
+    assert.invariant(node instanceof _Node, `isNodeOwnedBy() should be called with a node as the second argument instead of ${node}`);
+    assert.invariant(compareDocumentPosition.call(node, owner) & DOCUMENT_POSITION_CONTAINS, `isNodeOwnedBy() should never be called with a node that is not a child node of ${owner}`);
+  }
+
+  const ownerKey = getNodeNearestOwnerKey(node);
+
+  if (isUndefined(ownerKey)) {
+    if (lwcRuntimeFlags.ENABLE_LIGHT_GET_ROOT_NODE_PATCH) {
+      // in case of root level light DOM element slotting into a synthetic shadow
+      const host = parentNodeGetter.call(node);
+
+      if (!isNull(host) && isSyntheticSlotElement(host)) {
+        return false;
+      }
+    } // in case of manually inserted elements
+
+
+    return true;
+  }
+
+  return getNodeKey(owner) === ownerKey;
 }
 function shadowRootChildNodes(root) {
-    const elm = getHost(root);
-    return getAllMatches(elm, arrayFromCollection(childNodesGetter.call(elm)));
+  const elm = getHost(root);
+  return getAllMatches(elm, arrayFromCollection(childNodesGetter.call(elm)));
 }
 function getAllSlottedMatches(host, nodeList) {
-    const filteredAndPatched = [];
-    for (let i = 0, len = nodeList.length; i < len; i += 1) {
-        const node = nodeList[i];
-        if (!isNodeOwnedBy(host, node) && isNodeSlotted(host, node)) {
-            ArrayPush.call(filteredAndPatched, node);
-        }
+  const filteredAndPatched = [];
+
+  for (let i = 0, len = nodeList.length; i < len; i += 1) {
+    const node = nodeList[i];
+
+    if (!isNodeOwnedBy(host, node) && isNodeSlotted(host, node)) {
+      ArrayPush.call(filteredAndPatched, node);
     }
-    return filteredAndPatched;
+  }
+
+  return filteredAndPatched;
 }
 function getFirstSlottedMatch(host, nodeList) {
-    for (let i = 0, len = nodeList.length; i < len; i += 1) {
-        const node = nodeList[i];
-        if (!isNodeOwnedBy(host, node) && isNodeSlotted(host, node)) {
-            return node;
-        }
+  for (let i = 0, len = nodeList.length; i < len; i += 1) {
+    const node = nodeList[i];
+
+    if (!isNodeOwnedBy(host, node) && isNodeSlotted(host, node)) {
+      return node;
     }
-    return null;
+  }
+
+  return null;
 }
 function getAllMatches(owner, nodeList) {
-    const filteredAndPatched = [];
-    for (let i = 0, len = nodeList.length; i < len; i += 1) {
-        const node = nodeList[i];
-        const isOwned = isNodeOwnedBy(owner, node);
-        if (isOwned) {
-            // Patch querySelector, querySelectorAll, etc
-            // if element is owned by VM
-            ArrayPush.call(filteredAndPatched, node);
-        }
+  const filteredAndPatched = [];
+
+  for (let i = 0, len = nodeList.length; i < len; i += 1) {
+    const node = nodeList[i];
+    const isOwned = isNodeOwnedBy(owner, node);
+
+    if (isOwned) {
+      // Patch querySelector, querySelectorAll, etc
+      // if element is owned by VM
+      ArrayPush.call(filteredAndPatched, node);
     }
-    return filteredAndPatched;
+  }
+
+  return filteredAndPatched;
 }
 function getFirstMatch(owner, nodeList) {
-    for (let i = 0, len = nodeList.length; i < len; i += 1) {
-        if (isNodeOwnedBy(owner, nodeList[i])) {
-            return nodeList[i];
-        }
+  for (let i = 0, len = nodeList.length; i < len; i += 1) {
+    if (isNodeOwnedBy(owner, nodeList[i])) {
+      return nodeList[i];
     }
-    return null;
+  }
+
+  return null;
 }
 function shadowRootQuerySelector(root, selector) {
-    const elm = getHost(root);
-    const nodeList = arrayFromCollection(querySelectorAll$1.call(elm, selector));
-    return getFirstMatch(elm, nodeList);
+  const elm = getHost(root);
+  const nodeList = arrayFromCollection(querySelectorAll$1.call(elm, selector));
+  return getFirstMatch(elm, nodeList);
 }
 function shadowRootQuerySelectorAll(root, selector) {
-    const elm = getHost(root);
-    const nodeList = querySelectorAll$1.call(elm, selector);
-    return getAllMatches(elm, arrayFromCollection(nodeList));
+  const elm = getHost(root);
+  const nodeList = querySelectorAll$1.call(elm, selector);
+  return getAllMatches(elm, arrayFromCollection(nodeList));
 }
 function getFilteredChildNodes(node) {
-    if (!isSyntheticShadowHost(node) && !isSlotElement(node)) {
-        // regular element - fast path
-        const children = childNodesGetter.call(node);
-        return arrayFromCollection(children);
-    }
-    if (isSyntheticShadowHost(node)) {
-        // we need to get only the nodes that were slotted
-        const slots = arrayFromCollection(querySelectorAll$1.call(node, 'slot'));
-        const resolver = getShadowRootResolver(getShadowRoot(node));
-        // Typescript is inferring the wrong function type for this particular
-        // overloaded method: https://github.com/Microsoft/TypeScript/issues/27972
-        // @ts-ignore type-mismatch
-        return ArrayReduce.call(slots, (seed, slot) => {
-            if (resolver === getShadowRootResolver(slot)) {
-                ArrayPush.apply(seed, getFilteredSlotAssignedNodes(slot));
-            }
-            return seed;
-        }, []);
-    }
-    else {
-        // slot element
-        const children = arrayFromCollection(childNodesGetter.call(node));
-        const resolver = getShadowRootResolver(node);
-        return ArrayFilter.call(children, (child) => resolver === getShadowRootResolver(child));
-    }
+  if (!isSyntheticShadowHost(node) && !isSlotElement(node)) {
+    // regular element - fast path
+    const children = childNodesGetter.call(node);
+    return arrayFromCollection(children);
+  }
+
+  if (isSyntheticShadowHost(node)) {
+    // we need to get only the nodes that were slotted
+    const slots = arrayFromCollection(querySelectorAll$1.call(node, 'slot'));
+    const resolver = getShadowRootResolver(getShadowRoot(node)); // Typescript is inferring the wrong function type for this particular
+    // overloaded method: https://github.com/Microsoft/TypeScript/issues/27972
+    // @ts-ignore type-mismatch
+
+    return ArrayReduce.call(slots, (seed, slot) => {
+      if (resolver === getShadowRootResolver(slot)) {
+        ArrayPush.apply(seed, getFilteredSlotAssignedNodes(slot));
+      }
+
+      return seed;
+    }, []);
+  } else {
+    // slot element
+    const children = arrayFromCollection(childNodesGetter.call(node));
+    const resolver = getShadowRootResolver(node);
+    return ArrayFilter.call(children, child => resolver === getShadowRootResolver(child));
+  }
 }
 function getFilteredSlotAssignedNodes(slot) {
-    const owner = getNodeOwner(slot);
-    if (isNull(owner)) {
-        return [];
-    }
-    const childNodes = arrayFromCollection(childNodesGetter.call(slot));
-    return ArrayFilter.call(childNodes, (child) => !isNodeShadowed(child) || !isNodeOwnedBy(owner, child));
+  const owner = getNodeOwner(slot);
+
+  if (isNull(owner)) {
+    return [];
+  }
+
+  const childNodes = arrayFromCollection(childNodesGetter.call(slot));
+  return ArrayFilter.call(childNodes, child => !isNodeShadowed(child) || !isNodeOwnedBy(owner, child));
 }
 
 /*
@@ -3962,11 +3999,11 @@ function querySelectorPatched() {
     // element with shadowRoot attached
     const owner = getNodeOwner(this);
 
-    if (isNull(owner)) {
-      return null;
-    } else if (getNodeKey(this)) {
+    if (!isUndefined(getNodeKey(this))) {
       // it is a custom element, and we should then filter by slotted elements
       return getFirstSlottedMatch(this, nodeList);
+    } else if (isNull(owner)) {
+      return null;
     } else {
       // regular element, we should then filter by ownership
       return getFirstMatch(owner, nodeList);
@@ -4013,11 +4050,11 @@ function getFilteredArrayOfNodes(context, unfilteredNodes, shadowDomSemantic) {
     // element with shadowRoot attached
     const owner = getNodeOwner(context);
 
-    if (isNull(owner)) {
-      filtered = [];
-    } else if (getNodeKey(context)) {
+    if (!isUndefined(getNodeKey(context))) {
       // it is a custom element, and we should then filter by slotted elements
       filtered = getAllSlottedMatches(context, unfilteredNodes);
+    } else if (isNull(owner)) {
+      filtered = [];
     } else {
       // regular element, we should then filter by ownership
       filtered = getAllMatches(owner, unfilteredNodes);
@@ -5133,4 +5170,4 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
     }));
   });
 }
-/** version: 2.23.5 */
+/** version: 2.24.0 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/synthetic-shadow",
-    "version": "2.23.5",
+    "version": "2.24.0",
     "description": "Synthetic Shadow Root for LWC",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -36,8 +36,8 @@
         "access": "public"
     },
     "devDependencies": {
-        "@lwc/features": "2.23.5",
-        "@lwc/shared": "2.23.5"
+        "@lwc/features": "2.24.0",
+        "@lwc/shared": "2.24.0"
     },
     "nx": {
         "targets": {